ngFor - 初始显示后，正在修改数组，但更改未显示在视图中答案

【问题标题】：ngFor - After initial display the array is being modifed but the changes does not shows in viewngFor - 初始显示后，正在修改数组，但更改未显示在视图中
【发布时间】：2017-02-03 07:36:48
【问题描述】：

我有一个从服务器返回的数组，并通过在表中使用 *ngFor 来显示项目。处理完所选项目后，我会将其从数组中删除。该视图不会自动删除已删除的项目。但是，如果单击表头中的排序功能，则删除的项目将从视图中删除。我知道即使数组已在内部更新，我也需要通知视图数组已更改。但我找不到让它工作的方法。我希望有人能给我一个提示。谢谢。

Patient.ts
    public _records: Array<CRCasesLite>;

    constructor(private router: Router, 
                private route: ActivatedRoute) {
                this._records = this.route.snapshot.data['crCasesLite'];
    }

    onActivateRecord(record: CRCasesLite, index: number): void {
        ...
        if (index > -1) {
                    this._records.splice(index, 1);;
        }
    }


Patients.html
    <th class="input-sm">Patient <a (click)="oby=['PatientName']" class="fa fa-caret-up fa-2x"></a>  <a (click)="oby=['-PatientName']" class="fa fa-caret-down fa-2x"></a></th>

    <tr *ngFor="let record of _records | orderBy : oby ? oby : ['']; let i = index; trackBy:index">
       <td class="input-sm">{{record.PatientName}} {{record.Id}}</td>
       <td><a class="link btn btn-primary fa fa-plus-square" (click)="onActivateRecord(record, i)"></a></td>

【问题讨论】：

标签： arrays ngfor

【解决方案1】：

需要通知视图数组中的更改。为此，我们可以使用 ChangeDetectorRef 和 ChangeDetectorRef.markForCheck()。感谢 Marj Rajcok 在他对 Angular 2 的回答中提到了 detechChanges() - 模型更改后视图不更新Angular 2 - View not updating after model changes 和文章 Angular 2 Change Detection Explained by Pascal Precht http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html Precht 文章非常详细且简单易懂。

这些是我为使更新后的数组反映在 *ngFor in 上所做的代码更改

Patient.ts

import {  ChangeDetectorRef  } from "@angular/core";   // <--- added

public _records: Array<CRCasesLite>;

constructor( private cd: ChangeDetectorRef    // <--- added
             ... ) {
            this._records = this.route.snapshot.data['crCasesLite'];
}

onActivateRecord(record: CRCasesLite, index: number): void {
    ...
    if (index > -1) {
        this._records.splice(index, 1);
        this.cd.markForCheck();     // <--- added      
    }
}

Patients.html

<table>
    <th class="input-sm">Patient <a (click)="oby=['PatientName']" class="fa fa-caret-up fa-2x"></a>  <a (click)="oby=['-PatientName']" class="fa fa-caret-down fa-2x"></a></th>
    <th></<th>
    <tr *ngFor="let record of _records | orderBy : oby ? oby : ['']; let i = index; trackBy:index">
          <td class="input-sm">{{record.PatientName}} {{record.Id}}</td>
          <td><a class="link btn btn-primary fa fa-plus-square" (click)="onActivateRecord(record, i)"></a></td>
    </tr>
</table>

【讨论】：

【解决方案2】：

如果使用 providers:[]，请确保您没有在每个组件中使用 providers[]。如果组件之间需要相同的实例，则仅在父组件中提供 providers[]。

【讨论】：