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

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

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

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

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>

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