ngFor

Question

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

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>

Answer 1

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

这些是我为使更新后的数组反映在

中的 *ngFor 上所做的代码更改

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>

Answer 2

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

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

ngFor - After initial display the array is being modifed but the changes does not shows in view

arrays