ngFor - 最初の表示後、配列は変更中ですが、変更は表示されません。

Question

サーバから返された配列を持ち、* 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> 

Answer 1

ビューには、配列の変更が通知される必要があります。これを行うには、ChangeDetectorRefとChangeDetectorRef.markForCheck（）を使用できます。 Marj Rajcokさんに感謝します。角度変更2についての彼の答えで、モデル変更後に更新しないでください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の記事は非常に詳細で分かりやすいほど簡単です。

これら

は私が

Patients.html更新配列が

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  
    } 
} 

に* ngForに反映させるために作られたコードの変更です

<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>