javascript - 更改数据源后角度材料排序标题不起作用

Question

我无法弄清楚为什么在单击按钮时更改数据源后行过滤不起作用。逻辑是这样构建的，点击按钮后，我们会收到来自 api 的响应，并将 dataSource 设置为该响应。但没有任何效果。

这是我的表格模板代码：

<table mat-table [dataSource]="dataSource1" matSort class="table table-bordered" [ngClass]="issetPerformer || !wasSearchingPerformer ? 'table-hover' : null" *ngIf="issetPerformer || !wasSearchingPerformer" #matTable>

                                                                <ng-container matColumnDef="dateF" class="table-head">
                                                                    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="consoleLog($event)">Дата</th>
                                                                    <td mat-cell *matCellDef="let element"> {{element.date }} </td>
                                                                </ng-container>

                                                                <ng-container matColumnDef="costF" class="table-head">
                                                                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Сума</th>
                                                                    <td mat-cell *matCellDef="let element; let i = index"> {{paymentsPerformer[i].cost}} </td>
                                                                </ng-container>

                                                                <ng-container matColumnDef="detailsF" class="table-head">
                                                                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Примітки</th>
                                                                    <td mat-cell *matCellDef="let element"> {{element.details}} </td>
                                                                </ng-container>

                                                                <tr mat-header-row *matHeaderRowDef="displayedColumnss"></tr>
                                                                <tr mat-row *matRowDef="let row; columns: displayedColumnss;"></tr>
                                                            </table>

在课程开始时，我创建了所需的变量：

@ViewChild(MatSort) sort: MatSort;
paymentsPerformer: paymentsPerformer[] = [];
dataSource1  = new MatTableDataSource(this.paymentsPerformer);
displayedColumnss: string[] = ['dateF', 'costF', 'detailsF'];

这是类型的paymentsPerformer：

interface paymentsPerformer {
  date: string;
  cost: number;
  details: string;
}

所以，点击按钮后，我从api获取json并将其设置为paymentsPerformer变量：

showPaymentsPerformer() {
    this.api.showPerformerPaymentAdd(this.response.order.orderId + '_1').subscribe((data) => {
      console.log(data);
      this.wasSearchingPerformer = true;
      this.responsiveBodyPerformer = data.length >= 5;
      this.paymentsPerformer = data.map(i => {
        return {details: i.performerPaymentAddComment || ' ', cost: Number(i.performerPaymentAddSum), date: i.performerPaymentAddDate}
      });
      this.issetPerformer = true;
      this.wasSearchingPerformer = true;

    }, error => {
      console.log(error);
      this.wasSearchingPerformer = true;
      this.paymentsPerformer = [];
      this.issetPerformer = false;
    }, () => {
      console.log('array', this.paymentsPerformer)
      this.dataSource1  = new MatTableDataSource(this.paymentsPerformer);
      this.dataSource1.sort = this.sort;
      console.log('this.dataSource1', this.dataSource1);
    });
  }

函数开始时发生的事情无关紧要，在函数结束时（完成时）我设置所有数据并尝试再次排序。但不工作。

请帮我解决这个问题。谢谢。

标签： javascriptangulartypescriptangular-material