角マットソートが動作しない

Question

マットテーブルにmatSortをインポートする際に問題があります。

私は私のコードをご提供しています：提供 dohvatMantisaService

import { Injectable } from '@angular/core'; 
import {Http, Response, RequestOptions, Headers} from "@angular/http"; 
import {Observable} from "rxjs/Observable"; 
import {Mantisi} from "./Mantisi"; 
import 'rxjs'; 
import 'rxjs/operator/map'; 
import 'rxjs/operator/do'; 

@Injectable() 
export class DohvatMantisaService { 
    constructor(public http:Http) { } 
    result: Mantisi[]; 
    dohvatiMantise(): Observable<Mantisi[]>{ 
    return this.http.get('/mantis/getMantisReport').map(this.extractData); 
    } 
    private extractData(response: Response) { 
    let body = response.json(); 
    return body || {}; 
    } 

    prikazMantisa(): Mantisi[]{ 
    this.dohvatiMantise().subscribe(res => this.result = res); 
    return this.result; 
    } 
} 

とIM：

dashboard.component.tsは

import {Component, ViewChild} from '@angular/core'; 
import {UserService} from "../user.service"; 
import {DohvatMantisaService} from "../dohvat-mantisa.service"; 
import {Mantisi} from "../Mantisi"; 
import {Observable} from "rxjs/Observable"; 
import {DataSource} from "@angular/cdk/collections"; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import {MatSort} from '@angular/material'; 
@Component({ 
    selector: 'app-dashboard', 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.css'] 
}) 
export class DashboardComponent{ 
    displayedColumns = ['projekt', 'manits', 'kategorija','ozbiljnost','datum_prijave','postavio','odjel','postavio','naziv','status','planirana_isporuka']; 
    constructor(private user:UserService, private dohvatMantisa:DohvatMantisaService) { 
    } 
    dataSource: TableDataSource | null; 
    mantisi: Mantisi[]; 
    name = this.user.getUsername(); 
    @ViewChild(MatSort) sort: MatSort; 
    ngOnInit() { 
    this.dataSource = new TableDataSource(this.dohvatMantisa,this.sort); 
    } 
} 

export class TableDataSource extends DataSource<Mantisi>{ 
    constructor(private mantisiDS: DohvatMantisaService,private sort: MatSort){ 
    super(); 
    } 
    connect(): Observable<Mantisi[]> { 
    const displayDataChanges = [ 
     this.mantisiDS.dohvatiMantise(), 
     this.sort.sortChange, 
    ]; 

    return Observable.merge(...displayDataChanges).map(() => { 
     return this.getSortedData(); 
    }); 
    } 
    disconnect() {} 

    getSortedData(): Mantisi[]{ 
    const data = this.mantisiDS.prikazMantisa().slice(); 
    if (!this.sort.active || this.sort.direction == '') { return data; } 
    return data.sort((a, b) => { 
     let propertyA: number|string = ''; 
     let propertyB: number|string = ''; 
     switch (this.sort.active) { 
     case 'projekt': [propertyA, propertyB] = [a.projekt, b.projekt]; break; 
     case 'manits': [propertyA, propertyB] = [a.manits, b.manits]; break; 
     case 'kategorija': [propertyA, propertyB] = [a.kategorija, b.kategorija]; break; 
     case 'ozbiljnost': [propertyA, propertyB] = [a.ozbiljnost, b.ozbiljnost]; break; 
     case 'datum_prijave': [propertyA, propertyB] = [a.datum_prijave, b.datum_prijave]; break; 
     case 'postavio': [propertyA, propertyB] = [a.postavio, b.postavio]; break; 
     case 'naziv': [propertyA, propertyB] = [a.naziv, b.naziv]; break; 
     case 'status': [propertyA, propertyB] = [a.status, b.status]; break; 
     case 'planirana_isporuka': [propertyA, propertyB] = [a.planirana_isporuka, b.planirana_isporuka]; break; 
     } 

     let valueA = isNaN(+propertyA) ? propertyA : +propertyA; 
     let valueB = isNaN(+propertyB) ? propertyB : +propertyB; 

     return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1); 
    }); 
    } 
} 

これは私のサービスですあなたは私のdashboard.component.html matSortの行を持っています：

<mat-table #table [dataSource]="dataSource" class="example-table" matSort> 

ここでの主な問題は、データがロードされ、HTTPリクエストから取得したが、私はこのようなコンソールに何かのエラーを取得していますされていることである。

TableDataSourceのプロパティ「sortChange」 未定義のを読み取ることができません。 .webpackJsonp .../../../../../src/app/dashboard/dashboard.component.ts.TableDataSource.connect（dashboard.component.ts：36） at MatTable.webpackJsonp ... /../../cdk/esm5/table.es5.js.CdkTable._observeRenderChanges（table.es5.js：602） （MatTable.webpackJsonp .../../../cdk/esm5/table）。 es5.js.CdkTable.ngAfterContentChecked（タブle.es5.js：522）

それは、this.sort.sortChangeが未定義であることを私に伝えます。 私はインターネットのすべてのビットを検索し、適切な答えを見つけることができませんでした。あなたが私を助けてくれることを願っています。

Answer 1

私はこの問題の解決策を見つけました。

主な問題は、データが到着する前にテーブルがレンダリングされたことでした。私は最初にデータをロードし、それをsourceのようにdataSourceコンストラクタに送りました。その後、問題は消えた。それは、非同期のhttp.getとサービスを持つものです。

ありがとうございました。

fetchData(id){ 
    this.fetch.getProcesses(id).subscribe(result => { 
    this.processes = result; 
    this.dataSource = new TableDataSource(this.processes); 
    Observable.fromEvent(this.filter.nativeElement, 'keyup') 
     .debounceTime(150) 
     .distinctUntilChanged() 
     .subscribe(() => { 
     if (!this.dataSource) { 
      return; 
     } 
     this.dataSource.filter = this.filter.nativeElement.value; 
     }); 
    }); 
} 




export class TableDataSource extends DataSource<Proces>{ 
    _filterChange = new BehaviorSubject(''); 
    get filter(): string { 
    return this._filterChange.value; 
    } 
    set filter(filter: string) { 
    this._filterChange.next(filter); 
    } 
    filteredData: any =[]; 

    constructor(private processes:Proces[]){ 
    super(); 
    } 
    connect(): Observable<Proces[]>{ 
    const displayDataChanges = [ 
     this.processes, 
     this._filterChange, 
    ]; 
    return Observable.merge(...displayDataChanges).map(() => { 
     this.filteredData = this.processes.slice().filter((item: Proces) => { 
     const searchStr = (item.name).toLowerCase(); 
     return searchStr.indexOf(this.filter.toLowerCase()) !== -1; 

     }); 
     return this.filteredData; 
    }) 
    } 
    disconnect(){} 
} 



     <div class="header"> 
    <mat-form-field floatPlaceholder="never"> 
     <input matInput #filter placeholder="Pretraži procese"> 
    </mat-form-field> 
    </div> 
    <mat-table #table [dataSource]="dataSource" class="table-mantis" matSort> 

    <ng-container matColumnDef="col1"> 
     <mat-header-cell *matHeaderCellDef class="table-header-cell" mat-sort-header> Name</mat-header-cell> 
     <mat-cell *matCellDef="let row" class="example-cell" > {{row.nazivProcesa}} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="col2"> 
     <mat-header-cell *matHeaderCellDef class="table-header-cell" mat-sort-header> Cell 2</mat-header-cell> 
     <mat-cell *matCellDef="let row" class="example-cell" > {{row.nazivVlasnika 
     }} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="col3"> 
     <mat-header-cell *matHeaderCellDef class="table-header-cell" mat-sort-header> Cell 3</mat-header-cell> 
     <mat-cell *matCellDef="let row" class="example-cell" > {{row.interniAkt}} </mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="displayedColumns" class="example-header-row"></mat-header-row> 
    <mat-row class="example-row" *matRowDef="let row; columns: displayedColumns;"></mat-row> 
    </mat-table> 

Answer 2

"* ngIf"を使用してテンプレート内のテーブルコンテナを非表示にすると、viewchieldは未定義になります。

Answer 3

私はちょうどあなたのmatSort viewChildを正しく参照していることを確認し、MatSortModuleをインポートエリアのmodule.tsファイルに追加していることを確認しなければなりませんでした。次のような

： @NgModule({ imports: [ MatSortModule, MatTableModule, ] )}