Как использовать ChangeDetection в Angular 7 (представление не обновляется)?

Question

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

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

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

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>

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

Answer 1

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

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