Question

我一直在尝试按照材料（https://material.angular.io/components/sort/overview）中的可排序表格的指南，并在我尝试创建时使用自定义数组代替他们的示例数据库对我不起作用在示例中使用merge函数可观察（当我使用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(() => {

Table和MatSort不与observables一起使用

1 个答案: