Angular 角度材质表过滤不刷新

我有一张有棱角的材料桌子

<div class="card">
  <div class="card-header">
    <b>{{ pageTitle }}</b>
  </div>

  <div class="card-body">
    <div class="table-responsive">
      <mat-button-toggle-group
        name="timecardStatus"
        id="timecardStatus"
        aria-label="Timecard Status"
        #timecardStatus="matButtonToggleGroup"
      >
        <mat-button-toggle
          value="5"
          (change)="onValChange($event.value)"
          checked
          class="timecardStatusBtn"
          >Submitted</mat-button-toggle
        >
        <mat-button-toggle
          value="7"
          (change)="onValChange($event.value)"
          class="timecardStatusBtn"
          >Approved</mat-button-toggle
        >
      </mat-button-toggle-group>
      <mat-table
        #table
        id="timecardManagementTable"
        mat-table
        [dataSource]="dataSource"
        matSort
        class="mat-elevation-z8"
      >
        <!-- <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            Name
          </mat-header-cell>
          <mat-cell *matCellDef="let submittedTimecard">
            <span *ngIf="submittedTimecard.status === 5">
              {{ submittedTimecard.name }}
            </span>
          </mat-cell>
        </ng-container> -->
        <ng-container matColumnDef="beginPeriodDate">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            Beginning Date
          </mat-header-cell>
          <mat-cell *matCellDef="let submittedTimecard">
            <span *ngIf="submittedTimecard.status === 5">
              <a
                [routerLink]="[
                  '/',
                  clientId,
                  'timecardManagement',
                  submittedTimecard.id,
                  'details'
                ]"
              >
                {{ submittedTimecard.beginPeriodDate | date }}
              </a>
            </span>
            <span *ngIf="submittedTimecard.status === 7">
              {{ submittedTimecard.beginPeriodDate | date }}
            </span>
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="endPeriodDate">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Ending Date</mat-header-cell
          >
          <mat-cell *matCellDef="let submittedTimecard">
            {{ submittedTimecard.endPeriodDate | date }}
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="totalHours">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Total Hours</mat-header-cell
          >
          <mat-cell *matCellDef="let submittedTimecard">
            {{ submittedTimecard.totalHours | number: "1.2-2" }}
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="totalEarnings">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            Total Earnings
          </mat-header-cell>
          <mat-cell *matCellDef="let submittedTimecard">
            {{
              submittedTimecard.totalEarnings | currency: "USD":"symbol":"1.2-2"
            }}
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="approve">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let submittedTimecard">
            <button
              class="btn btn-outline-success"
              type="button"
              title="Approve this Timecard"
              (click)="approveTimecard(submittedTimecard.id)"
              *ngIf="submittedTimecard.status === 5"
            >
              Approve
            </button>
            <button
              class="btn btn-outline-warning ml-3"
              type="button"
              title="Reject this Timecard"
              (click)="rejectTimecard(submittedTimecard.id)"
              *ngIf="submittedTimecard.status === 7"
            >
              Reject
            </button>
          </mat-cell>
        </ng-container>
        <mat-header-row
          *matHeaderRowDef="displayedColumns; sticky: true"
        ></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>

      <mat-paginator
        [pageSizeOptions]="[5, 10, 20]"
        showFirstLastButtons
      ></mat-paginator>
    </div>
  </div>
</div>

我正在使用此行刷新表数据源

this.dataSource = new MatTableDataSource( timecardResponse );

我正在使用这一行“重新过滤”视图

this.onValChange( '5' );

以下是onValChange方法

onValChange( filterValue: string ) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if ( this.dataSource.paginator ) {
      this.dataSource.paginator.firstPage();
    }
  }

---

问题就在这里……表格没有刷新和重新过滤。单击approve按钮时，该方法将运行，但表不会刷新。应该发生的是，我单击“批准”的项目不应再显示在筛选视图中。那么我遗漏了什么呢？

我认为可以使用

this.dataSource=[…this.dataSource]刷新表数据

将更新后的数据输入到

this.dataSource

中后，如果要更新数据源数据，请尝试使用此选项` this.dataSource.data=timecardResponse` this.dataSource=[…this.dataSource]与

this.dataSource=new MatTableDataSource有何不同（timecardResponse）；

或

this.dataSource.data=timecardResponse

？我认为可以使用

this.dataSource=[…this.dataSource]刷新表数据

将更新后的数据输入到

this.dataSource

中后，如果要更新数据源数据，请尝试使用此选项` this.dataSource.data=timecardResponse` this.dataSource=[…this.dataSource]与

this.dataSource=new MatTableDataSource有何不同（timecardResponse）；

或

this.dataSource.data=timecardResponse

？

onValChange( filterValue: string ) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if ( this.dataSource.paginator ) {
      this.dataSource.paginator.firstPage();
    }
  }