Angular2 ngFor：DOMの追加/削除時？それを強制的にDOMを再作成する方法？

Question

私はAngular2 * ngForで遊んでいますが、DOMを再作成するときはちょっと混乱します。

ケース1のコードがonClick()の場合は、2つの<li>を再作成しますが、this.objArrに同じ値を割り当てます。

ケース2のコードがonClick()の場合は、<li>の2つを再作成せず、<li>をもう1つ追加してください。どのようにしてDOMを再作成するかを決定する方法が不思議です。私が何をしたいか

はです：

私はちょうど私はそれがプッシュされたオブジェクトのDOMを追加する以外にも私のために既存のDOMを再作成させることができますどのように、既存のアレイに複数のオブジェクトをプッシュする場合は？ケース2のように、ngForが私のために最初の2つの<li>を作り直すことを願っています。

HTML：

<button (click)="onClick($event)"></button> 
    <li *ngFor="let obj of objArr"></div> 

.TSファイル：

constructor() { 
     this.objArr = [ 
        { 
         'id': 0, 
         'content': 'test0' 
        }, 
        { 
         'id': 1, 
         'content': 'test1' 
        } 
       ]; 
    } 

    onClick() { 
     // case 1: recreate two <li> 
     this.objArr = [ 
        { 
         'id': 0, 
         'content': 'test0' 
        }, 
        { 
         'id': 1, 
         'content': 'test1' 
        } 
       ]; 

     // case 2: just add one <li> after the two existing <li> 
     this.objArr.push({ 
      'id': '2', 
      'content': 'test2' 
     }); 


    } 

Answer 1

あなたは一時的にヌルとの間でdetectChangesを呼び出すことにより、DOMを更新するために、角度 "強制" するobjArrを設定することができます。

constructor(private cdRef:ChangeDetectorRef) {} 

onClick() { 
    var tmp = this.objArr; 
    this.objArr = null; 
    this.cdRef.detectChanges(); 
    this.objArr = tmp; 
    this.cdRef.detectChanges(); 
}