如何在不重新加载页面的情况下刷新 mat-table 的数据

Question

也许我的问题可能与this question. 重复 但是我不明白那里给出的答案，所以我再次询问是否有人可以帮助我。 我有一个垫表，我用它来显示客户记录。我显示以下细节。客户 ID、名字、姓氏、城市和状态（活动/非活动）。在我的垫子表的最后一列中，我有一个删除按钮来删除客户记录。 如果我删除记录，状态将变为非活动。但是在我的情况下，状态不会改变，直到我刷新我的页面。 如何在不刷新页面的情况下更改状态。 我已经使用新的new MatTableDataSource<>([]) 再次初始化 mat-table。我认为这可以解决我的问题，但它没有。

mat-table 的 HTML 代码

  // Delete function
  deleteCustomer(element) {
    this.customer360Service.deleteCustomer(element.id).subscribe(
      data => {
        console.log(data);
        console.log(this.customerId);
        this.snackbar.open('Customer Deleted Successfully', 'Close', {
          duration: 3000
        });
        this.customerSearchRecordList = new MatTableDataSource<Customer>([this.customerSearchRecord]);

      },
      err => {
        console.log('***', this.customerId);
        this.snackbar.open('Failed To Delete Customer', 'Close', {
          duration: 3000
        });
      }
    );
  }

<mat-table [dataSource]="customerSearchRecordList" matSort>
      <ng-container matColumnDef="index">
        <mat-header-cell *matHeaderCellDef> Number </mat-header-cell>
        <mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</mat-cell>
      </ng-container>

      <!-- Customer Id Column -->
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>Customer Id</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.id }}</mat-cell>
      </ng-container>

      <!-- First Name Column -->
      <ng-container matColumnDef="firstName">
        <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.individualCustomer.primaryFirstName }}</mat-cell>
      </ng-container>

      <!-- Last Name Column -->
      <ng-container matColumnDef="lastName">
        <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.individualCustomer.primaryLastName }}</mat-cell>
      </ng-container>

      <!-- Status Column -->
      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
        <mat-cell
          *matCellDef="let element"
          [ngClass]="{
            positive: element.status == 'Active',
            negative: element.status == 'In Active'
          }"
          >{{ element.status }}</mat-cell
        >
      </ng-container>
      <!-- View Button -->
      <ng-container matColumnDef="actions">
        <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
        <mat-cell *matCellDef="let element; let index = index">
          <smd-fab-speed-dial [open]="open" [direction]="direction" [animationMode]="animationMode" [fixed]="fixed">
            <smd-fab-trigger [spin]="true">
              <button color="black" matTooltip="More job actions ..." class="view-data" mat-fab (click)="moreActionToggle()">
                <i class="material-icons">more_horiz</i>
              </button>
            </smd-fab-trigger>
            <smd-fab-actions>
              <button mat-mini-fab color="#b71c1c" matTooltip="View" (click)="transferIndCustData(element)">
                <i class="material-icons large" style="font-size: 28px">
                  pageview
                </i>
              </button>
              <button mat-mini-fab color="#b71c1c" matTooltip="Delete" (click)="deleteCustomer(element)">
                <i class="material-icons large" style="font-size: 28px">
                  delete
                </i>
              </button>
            </smd-fab-actions>
          </smd-fab-speed-dial>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></mat-row>
    </mat-table>

我正在执行软删除，这意味着我的记录实际上并未被删除，但状态列显示为非活动而不是活动。 最初，如果我有 10 个客户行并且所有行都处于活动状态，现在如果我删除第一行客户，那么我仍然有 10 行，唯一会改变的是第一行状态列将更改为 In Active。

Answer 1

试试：

idColumn = "custId" // to declare your id property name (eg: custId: 1).

deleteCustomer(element) {
this.customer360Service.deleteCustomer(element.id).subscribe(
  data => {
    this.snackbar.open('Customer Deleted Successfully', 'Close', {
      duration: 3000 });
          this.deleteRowDataTable(
            custProd.custProdId,
            this.idColumn, 
            this.paginator1,
            this.dataSource1
          )
   },
  err => {
    this.snackbar.open('Failed To Delete Customer', 'Close', {
      duration: 3000
    });
   }
 );
}

private deleteRowDataTable(recordId, idColumn, paginator, dataSource) {
   this.dsData = dataSource.data
   const itemIndex = this.dsData.findIndex(obj => obj[idColumn] === recordId)
   dataSource.data.splice(itemIndex, 1)
   dataSource.paginator = paginator
}

Answer 2

您正在寻找的简单答案是将 customerSearchRecordList 的 dataSource 值替换为

BehaviorSubject<customerSearchRecordList>

或

Subject<customerSearchRecordList>

只要源（db）发生变化，您就可以通过将新值作为参数传递给 Subject/BehaviorSubject 的下一个方法来更新 dataSource

在处理动态数据时，BehaviorSubject 或 Subject 应该有助于解决跨 Angular 应用程序的问题。

在这种特殊情况下。 定义

dataSource$: Subject<customerSearchRecordList>;

在任何 CRUD 操作之后 以更新为例：

update(somevalue) {
    this.http.post('somelink').subscribe(res => {
       if (all good) {
           // make the http get to get the new source for 
           // customerSearchRecordList and pass the new datasource to your subject.
           this.dataSource$.next(newSearchResult); // **important**
       }
    })
}

在html中

<mat-table [dataSource]="dataSource$" matSort>
.....
</mat-table>