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([]);
                })
            )
    }

导出类IntegratedComponent在ViewInit之后实现{
displayedColumns:string[]=['actions'，'id'，'date'，'fullName']；
数据：可观察；
私有url；
corpId:string；//用于输入字段
构造函数（私有integrationService:integrationService）{}
@ViewChild（MatSort）sort:MatSort；//允许用户对物料表中的项目进行排序
ngAfterViewInit（）{}
搜索（术语：字符串）{
this.integratedData=merge（this.sort.sortChange）
.烟斗(
startWith（{}），
开关映射（（）=>{
返回此.integratedService！.getIdData（术语）；
}),
地图（obj=>{
返回obj；
}),
捕获错误（（）=>{
返回观察值（[]）；
})
)
}

以下是模板：

<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>

搜索ID
{{searchBox.value.length}/8
搜索
行动
{{element.actions}
身份证件
{{element.id}
日期
{{element.date | date}
全名
{{element.fullName}

---

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

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