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)

如何在Angular 7中使用ChangeDetection（视图未更新）？

1 个答案: