Как обновить данные mat-таблицы без перезагрузки страницы

Question

Возможно, мой вопрос может показаться возможным дубликатом этого вопроса. Однако я не понимаю ответ, данный там, поэтому я спрашиваю его снова, может ли кто-нибудь помочь мне.У меня есть таблица матов, которую я использую для отображения записей клиентов.Я показываю следующие детали.Идентификатор клиента, имя, фамилия, город и статус (активный / неактивный).В последнем столбце моей таблицы соответствия у меня есть кнопка удаления, чтобы удалить запись клиента.Если я удаляю запись, статус меняется на Неактивный.Однако в моем случае статус не изменится, пока я не обновлю свою страницу.Как я могу изменить статус, не обновляя мою страницу.Я использовал новый new MatTableDataSource<>([]) для повторной инициализации таблицы mat. Я думал, что это решит мою проблему, но это не так.

HTML-код для таблицы mat

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

Простой ответ, который вы ищете, заключается в замене значения dataSource customerSearchRecordList на

BehaviorSubject<customerSearchRecordList>

или

Subject<customerSearchRecordList>

Каждый раз, когда происходит изменение в вашем источнике (дБ),Вы обновляете источник данных, передавая новое значение в качестве параметра следующему методу Subject / BehaviorSubject

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 2

Попробуйте:

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
}