Блог

Я не знаю, как использовать обнаружение изменений в моем приложении angular. Цель моего подхода состоит в том, чтобы показывать список обновлений только в том случае, если данные изменены в моем списке таблиц.

В настоящее время отображаются только первые данные, когда я изменяю одну строку в моем списке таблиц. В консоли я вижу вторые измененные данные, но мое представление не изменяет список обновлений.

Это мой компонент:

 import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
...

export class TableListComponent implements OnInit {

  private changedData: ItemList[] = [];
  private existChangedData: boolean = false;

    constructor(private cd: ChangeDetectorRef) { }

  onBlur(item: ItemList): void {
    this.changedData.push(item);
    this.existChangedData = true;

    setTimeout(() => { this.refresh(); });
  }

  refresh() {
    this.cd.detectChanges();
  }
}
  

и мой взгляд:

 //requestData is data from HTTP request to a server

<table mat-table [dataSource]="requestData" class="mat-elevation-z5">
  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let elem">
      <span> {{elem.ID}} </span>
    </td>
  </ng-container>

  <ng-container matColumnDef="NAME">
    <th mat-header-cell *matHeaderCellDef> NAME </th>
    <td mat-cell *matCellDef="let elem">
            <mat-form-field> 
              <input matInput [(ngModel)]="elem.NAME" #idInput (blur)="onBlur(idInput, elem)">
            </mat-form-field>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedCols"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedCols; let i = index"></tr>
</table>

<br>
<br>

<table mat-table [dataSource]="changedData" class="mat-elevation-z5" *ngIf="existChangedData">
  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let cdata"> 
      <span>{{cdata.ID}}</span> 
    </td>
  </ng-container>

  <ng-container matColumnDef="NAME">
    <th mat-header-cell *matHeaderCellDef> NAME </th>
    <td mat-cell *matCellDef="let cdata"> 
      <span>{{cdata.NAME}}</span> 
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedCols"></tr>
  <tr mat-row *matRowDef="let changedRow; columns: displayedCols"></tr>
</table>
  

Кто-нибудь может помочь мне с проблемой?

Angular обнаруживает изменения в вашем массиве только в том случае, если его ссылка изменилась. Поэтому вы должны не только добавлять в него новые записи, но и назначать новый массив элементу. Это можно сделать следующим образом:

 this.changedData = this.changeData.slice(0)