时间戳

首页 > 解决方案 > Angular 7对自定义数据源进行排序

angular - Angular 7对自定义数据源进行排序

问题描述

我在我的风险组件中创建了一个自定义数据源，用于访问 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 标签，它在那里，只是没有显示）

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

任何帮助将不胜感激！

标签： angularangularjs-directiveangular-material2

解决方案

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

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

风险仪表板组件

添加这个

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));
}

**

推荐阅读