Angular 7对自定义数据源进行排序答案

【问题标题】：Angular 7 Sorting on Custom DataSourceAngular 7对自定义数据源进行排序
【发布时间】：2019-05-28 18:31:19
【问题描述】：

我在我的风险组件中创建了一个自定义数据源，用于访问 API、检索风险列表并将它们显示在表格中。表格显示正常，但我的排序不起作用。

我不完全确定为什么每次单击可排序标题时我都会在页面上调用刷新，但什么也没有。我尝试了几个不同的示例和配置，但我遗漏了一些东西。

这是我的 risk.component.ts

export class RiskDashboardComponent implements AfterViewInit, OnInit {

@ViewChild(MatSort) sort: MatSort;

dataSource: RiskDataSource;

displayedColumns = ['riskName'];

constructor(private riskService: RiskManagmentService) {}

ngOnInit() {
    this.dataSource = new RiskDataSource(this.riskService);
    this.dataSource.loadRisks();
}

ngAfterViewInit() {
    merge(this.sort.sortChange).pipe(
        tap(() => this.loadRisksPage())
    )
        .subscribe();
}

loadRisksPage() {
    this.dataSource.loadRisks();
}


}

export class RiskDataSource implements DataSource<IRisk> {

private risksSubject = new BehaviorSubject<IRisk[]>([]);
private loadingSubject = new BehaviorSubject<boolean>(false);

constructor(private riskService: RiskManagmentService) {}

connect(collectionViewer: CollectionViewer): Observable<IRisk[]> {
    return this.risksSubject.asObservable();

}

disconnect(collectionViewer: CollectionViewer): void {
    this.risksSubject.complete();
    this.loadingSubject.complete();
}

loadRisks() {
    this.loadingSubject.next(true);
    this.riskService.getAllRisks().subscribe(risk => this.risksSubject.next(risk));
}
}

risk.component.html

<div>
<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource"
           matSort matSortActive="riskName">
    <ng-container matColumnDef="riskName">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Risk Name </mat-header-cell>
        <mat-cell *matCellDef="let risk"> {{risk.riskRegister.riskName}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>

（inb4 缺少 div 标签，它在里面，只是没有显示）

每次单击风险名称顺序箭头时，它都会再次查询数据库以获取风险列表

任何帮助将不胜感激！

【问题讨论】：

标签： angular angularjs-directive angular-material2

【解决方案1】：

由于您使用自己的数据源，因此角度材料文档网站中的大多数示例都不适用于您。

首先，您需要从子视图中获取 matsort 并将其传递到数据源中。

RiskDashBoardComponent

添加这个

ViewChild(MatSort) sort: MatSort;
ngOnInit() {
    this.dataSource = new RiskDataSource(this.riskService, this.sort);
    this.dataSource.loadRisks();
}

在这里，您需要对 observables 有一点了解。

现在你需要返回一个 observable，通过合并它们来监听两件事。因此，当 riskSubject 获得新数据或 mat 排序发出新的排序序列时，您将始终通过获取排序方向的当前值和 riskSubject 的当前值来处理数据。

您可以从 Angular Material 文档网站了解如何实现自定义 sortData 函数。

https://material.angular.io/components/sort/examples

风险数据源

connect(collectionViewer: CollectionViewer): Observable<IRisk[]> {
    const displayDataChanges = [
      this.risksSubject,
      this._sort.sortChange
    ];
    merge(...displayDataChanges).pipe(map(() => {
        return this.sortData(this.risksSubject.getValue());
    }));

}

loadRisks() {
    this.loadingSubject.next(true);
    this.riskService.getAllRisks().subscribe(risk => 
     this.risksSubject.next(risk));
}

【讨论】：