Angular 7 在自定义数据源上排序

Question

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

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

这是我的 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 标签，它在那里，只是没有显示)

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

如有任何帮助，我们将不胜感激!

Answer 1

由于您使用的是自己的数据源，因此 Angular Material 文档网站中的大部分示例不适用于您。

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

RiskDashBoardComponent

添加这个

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

您需要了解一些关于可观察量的知识。

现在您需要返回一个可观察对象，通过合并它们来监听两个事物。因此，当 riskSubject 获取新数据或 mat sort 发出新的排序序列时，您将始终通过获取排序方向的当前值和 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));
}

**