表和MatSort不能使用observables

问题描述：

我一直在试图遵循材料中的可排序表指南（https://material.angular.io/components/sort/overview），并将其与自定义数组而不是他们的样本数据库一起使用，当我尝试创建可观察到与示例中的合并功能（它的工作原理，当我与Observable.of创建它（））表和MatSort不能使用observables

我的数据源是这样的：

export class StallEventsDataSource extends DataSource<StallEvent> { 
    constructor(private stallEvents: StallEvent[], private _sort: MatSort) { 
    super(); 
    } 

    connect(): Observable<StallEvent[]> { 
    const displayDataChanges = [ 
     this._sort.sortChange 
    ]; 

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

    disconnect() { 
    } 

    getSortedData(): StallEvent[] { 
    return this.stallEvents; 
    } 
}

的数据显示，高达（不排序功能，不出所料），如果我改变

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

到

return Observable.of(this.getSortedData());

如果有帮助，这里是模板：

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

    <ng-container matColumnDef="VideoTime"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> Video Time </mat-header-cell> 
    <mat-cell *matCellDef="let row"> {{row.VideoTime}} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="Duration"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> Duration </mat-header-cell> 
    <mat-cell *matCellDef="let row"> {{row.Duration}} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="AbsoluteStartTime"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> Absolute Start Time </mat-header-cell> 
    <mat-cell *matCellDef="let row"> {{getDateString(row.TimestampStart)}} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="AbsoluteEndTime"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> Absolute End Time </mat-header-cell> 
    <mat-cell *matCellDef="let row"> {{getDateString(row.TimestampEnd)}} </mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="['VideoTime', 'Duration', 'AbsoluteStartTime','AbsoluteEndTime']"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: ['VideoTime', 'Duration', 'AbsoluteStartTime','AbsoluteEndTime']"></mat-row> 

</mat-table>

没有人有任何深入了解什么，我做错了什么？

答

刚刚尝试这一点，改变

return Observable.merge(...displayDataChanges).map(() => {

到

return Observable.merge(this.sort.sortChange).map(() => {

表和MatSort不能使用observables

相关推荐