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

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

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

这是我的风险

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

导出类RiskDashboardComponent实现AfterViewInit、OnInit{
@ViewChild（MatSort）排序：MatSort；
数据源：风险数据源；
displayedColumns=['riskName']；
构造函数（私有风险服务：风险管理服务）{}
恩戈尼尼特（）{
this.dataSource=新的风险数据源（this.riskService）；
this.dataSource.loadRisks（）；
}
ngAfterViewInit（）{
合并（this.sort.sortChange）.pipe(
点击（（）=>this.loadRisksPage（））
)
.subscribe（）；
}
loadRisksPage（）{
this.dataSource.loadRisks（）；
}
}
导出类RiskDataSource实现DataSource{
私人风险主体=新行为主体（[]）；
私有加载主体=新行为主体（false）；
构造函数（私有风险服务：风险管理服务）{}
连接（collectionViewer:collectionViewer）：可观察{
返回此.risksObject.asObservable（）；
}
断开连接（collectionViewer:collectionViewer）：无效{
此.risksObject.complete（）；
this.loadingSubject.complete（）；
}
装载风险（）{
this.loadingSubject.next（true）；
this.risksservice.getAllRisks（）.subscribe（风险=>this.risksObject.next（风险））；
}
}

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>

风险名称
{{risk.riskRegister.riskName}

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

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

---

任何帮助都将不胜感激

当您使用自己的数据源时，Angle material documentation网站中的大多数示例不适用于您

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

RiskDashBoardComponent

加上这个

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

在这里，你需要一点关于可观测的知识

现在，您需要返回一个可观察对象，该对象通过合并两个对象来侦听两个对象。因此，当RisksObject获取新数据或mat sort发出新的排序序列时，您将始终通过获取排序方向的当前值和RisksObject的当前值来处理数据

您可以从angular material documentation站点了解如何实现自定义sortData函数

风险数据源

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

connect（collectionViewer:collectionViewer）：可观察{
const displayDataChanges=[
这个.risksObject，
这个
];
合并（…显示数据更改）.pipe（映射（（）=>{
返回this.sortData（this.risksObject.getValue（））；
}));
}
装载风险（）{
this.loadingSubject.next（true）；
this.riskService.getAllRisks（）.subscribe（风险=>
this.risksobject.next（risk））；
}

**