Угловая 7 сортировка по пользовательскому источнику данных

Question

У меня есть собственный источник данных, который я создал в своем компоненте Risk, чтобы обращаться к 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, он там, просто не отображается)

Каждый раз, когда нажимается стрелка заказа имени риска, он снова запрашивает в базе данных список рисков

Любая помощь будет принята с благодарностью!

Answer 1

Поскольку вы используете свой собственный источник данных, большая часть примера на веб-сайте документации по угловым материалам к вам не относится.

Во-первых, вам нужно получить мацорт из дочернего представления и передать его в источник данных.

RiskDashBoardComponent

Добавить это

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

Вам потребуется небольшое знание наблюдаемых здесь.

Теперь вам нужно вернуть наблюдаемое, которое слушает две вещи, объединяя их. Поэтому, когда либо riskSubject получает новые данные, либо сортировка матов генерирует новую последовательность сортировки, вы всегда будете обрабатывать данные, получая текущее значение направления сортировки и текущее значение riskSubject.

Вы можете увидеть, как реализовать пользовательскую функцию sortData с сайта документации по угловым материалам.

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

RiskDataSource

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

**