Question

我的组件中有一个下表，

listSuggestions

我在列定义和表级别都保留了mat-sort指令。
https://material.angular.io/components/table/examples中提供的所有示例-列出了从TS文件设置为非可观察流时的dataSource。

Answer 1

只是将我的头撞在墙上大约一会儿，所以把它放在这里希望可以节省一些时间。对我有用的东西：

component.ts：

try:
   #get your historical data
except HDMS query returned no data:
    #continue/break/go back to data collecting

component.html：

@Input() dataSource;

@ViewChild(MatSort, {static: true}) sort: MatSort;

ngAfterViewInit() {
  this.dataSource.subscribe(data => {
    this.dataSource = new MatTableDataSource(data);
    this.dataSource.sort = this.sort;
  });
}

确保将Observable传递到<app-table [dataSource]="yourService.getData()"></app-table>时不要使用async管道。

我是Angular，TS和RxJS（通常与React一起使用）的新手，所以如果有人看到这种方法的问题，请告诉我！

Answer 2

以同样的方式。您只需对Observable中的元素进行排序。

(matSortChange)="sortData($event)"

然后对其进行排序：

sortData(sort: Sort) {
    this.searchResults$ = this.searchResults$.pipe(map(results => {
        // sort the results like in examples
    }));
  }

Answer 3

如果您需要加载（异步），那么在加载后您需要呈现表格并设置异步排序。试试这个

component.html

 <loading-component *ngIf="isLoading$ | async"></loading-component> <--WHILE Loading

<div *ngIf="!(isLoading$ | async)"> <-- AFTER Loading
    <ng-container *ngIf="dataSource.data.length >= 1; else noData">  <--Check if there's data
        <table mat-table [dataSource]="dataSource" matSort>
            ...
        </table>
    </ng-container>
    <ng-template #noData>  <- In case there is not data (to not show the table/table-header)
        ...
    </ng-template>
</div>

component.ts

import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { Observable } from 'rxjs/Observable';

export class Component {
  dataSource = new MatTableDataSource<any>();
  isLoading$: Observable<boolean>;  
  private _sort: MatSort;
  
  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this._sort = ms;
    this.dataSource.sort = this._sort;
  }
.. the rest of the component logic ...

使用 SET Sort，您可以将动态（异步）数据提取到表中，然后对其进行排序。

继续编码 \m/

当数据源为Observable <t>时，如何在Angular Material Data Table中启用排序

3 个答案: