表和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>

沒有人有任何深入瞭解什麼，我做錯了什麼？

來源

2017-10-20 avern

剛剛嘗試這一點，改變

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

到

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

來源

2017-10-30 16:58:33 WambuaMakenzi

表和MatSort不能使用observables

回答

相關問題