Table和MatSort不与observables一起使用

Question

我一直在尝试遵循材料（https://material.angular.io/components/sort/overview）中可排序表的指南，并且当我尝试使用合并函数创建Observable时，使用它与自定义数组而不是他们的示例数据库对我来说并不是很有效。示例（当我使用Observable.of（）创建它时，它可以工作）

我的数据源看起来像：

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>

有没有人对我做错了什么有任何见解？

Answer 1

试试这个，改变吧

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

至

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