对角材料表中的可观察数据进行排序答案

【问题标题】：Sorting Observable Data in an Angular Material Table对角材料表中的可观察数据进行排序
【发布时间】：2021-05-13 21:06:47
【问题描述】：

我正在尝试对 Angular 材料表中的可观察数据进行排序。我能够成功地将数据加载到表中，但我无法对其进行排序。请看下面的代码：

export class IntegratedComponent implements AfterViewInit {

    displayedColumns: string[] = ['actions', 'id', 'date', 'fullName'];
    data: Observable<Data[]>;
    private url;
    corpId: string; // used in input field

    constructor(private integrationService: IntegrationService) {}

    @ViewChild(MatSort) sort: MatSort; // allows user to sort items in material table

    ngAfterViewInit() {}

    search(term: string) {
        this.integratedData = merge(this.sort.sortChange)
            .pipe(
                startWith({}),
                switchMap(() => {
                    return this.integratedService!.getIdData(term);
                }),
                map(obj => {
                    return obj;
                }),
                catchError(() => {
                    return observableOf([]);
                })
            )
    }

这是模板：

<mat-form-field>
    <mat-label>Search for ID</mat-label>
    <input matInput #searchBox maxLength="7" [(ngModel)]="id" required>
    <mat-hint align="start">{{searchBox.value.length}} / 8</mat-hint>
    <mat-icon title="Search" class="search-icon" matSuffix (click)="search(id)">search</mat-icon>
</mat-form-field>

<table mat-table [dataSource]="data" class="mat-elevation-z8" matSort>

        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
            <td mat-cell *matCellDef="let element">{{element.actions}}</td>
        </ng-container>

        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
            <td mat-cell *matCellDef="let element">{{element.id}}</td>
        </ng-container>

        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef> Date </th>
            <td mat-cell *matCellDef="let element">{{element.date | date}}</td>
        </ng-container>

        <ng-container matColumnDef="fullName">
            <th mat-header-cell *matHeaderCellDef> Full Name </th>
            <td mat-cell *matCellDef="let element">{{element.fullName}}</td>
        </ng-container>
</table>

这些按钮显示在模板中 - 它们只是不起作用。我该如何解决这个问题？

【问题讨论】：

标签： angular sorting angular-material observable angular-material-table

【解决方案1】：

借助 YT 视频，我能够弄清楚这一点。请看下面的答案：

export class IntegratedComponent implements AfterViewInit {

    displayedColumns: string[] = ['actions', 'id', 'date', 'fullName'];
    dataSource = new MatTableDataSource([]);
    private url;
    corpId: string; // used in input field

    constructor(private integrationService: IntegrationService) {}

    @ViewChild(MatSort) sort: MatSort; // allows user to sort items in material table

    ngAfterViewInit() {}

    search(term: string) {
        this.integratedService.getIdData(term).subscribe(next => {
            if(!results) {
                return;
            }
            this.dataSource = new MatTableDataSource(results);
            this.dataSource.sort = this.sort;
        })
    }
}

【讨论】：