角matSort不工作

Question

我有麻烦进口matSort到我的matTable。

我为您提供我的代码：

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); 
    }); 
    } 
} 

这是我的服务： 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.html matSort行：

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

这里的主要问题是，数据加载和HTTP请求获得的，但我发现在控制台像这样的错误：

无法读取的不确定 财产“sortChange”在TableDataSource .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） at MatTable.webpackJsonp .../../../cdk/esm5/table。 es5.js.CdkTable.ngAfterContentChecked（tab le.es5.js：522）

它告诉我，this.sort.sortChange是不确定的。 我搜查了互联网的所有位，并找不到正确的答案。希望你能帮助我。

Answer 1

我发现这个问题的解决方案。

主要问题是表格在数据到达之前呈现。我已经加载数据，并将其发送到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，并确保您已在导入区的module.ts文件中添加了MatSortModule。

类似如下： @NgModule({ imports: [ MatSortModule, MatTableModule, ] )}