Question

也许我的问题可能与this question.重复但是我不明白那里给出的答案，所以我再次询问是否有人可以帮助我。我有一个垫子桌子，用它可以显示客户记录。我显示以下细节。客户编号，名字，姓氏，城市和状态（有效/无效）。在席子表的最后一栏中，我有一个删除按钮以删除客户记录。如果删除记录，状态将变为“不活动”。但是，就我而言，状态不会更改，直到刷新页面为止。如何在不刷新页面的情况下更改状态。我已经使用新的new MatTableDataSource<>([])再次初始化了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行，唯一要更改的是第一行状态列将更改为“活动中”。

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

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

2 个答案: