如何在不重新加載頁面的情況下刷新mat-table的數據

Question

也許我的問題看起來可能是這個問題的重復。 但是我不明白那里給出的答案所以我再次詢問是否有人可以幫助我。 我有一個墊子表，我用它來顯示客戶記錄。 我顯示以下詳細信息。 客戶 ID、名字、姓氏、城市和狀態（活躍/不活躍）。 在我的 mat-table 的最后一列中，我有一個刪除按鈕來刪除客戶記錄。 如果我刪除記錄，狀態將變為非活動狀態。 但是在我的情況下，狀態不會改變，直到我刷新我的頁面。 如何在不刷新頁面的情況下更改狀態。 我已經使用 new 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 行，唯一會改變的是第一行狀態列將更改為“處於活動狀態”。

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>

Answer 3

在我的例子中，要刷新數據而不刷新 html 數據表/mat-table 中的整個頁面。 我剛剛在 Angular 的生命周期掛鈎 AfterViewChecked 之一中重新分配它，就是這樣，我在數據表中獲取了新數據。 組件.ts

ngAfterViewChecked(): void {
  this.lstorage = JSON.parse(localStorage.getItem('employee')!);
  this.dataSource = new MatTableDataSource(this.lstorage);
}