Angular2 ngFor: при добавлении/удалении DOM? как заставить его воссоздать DOM?

Question

Я играю с Angular2 * ngFor и немного смущаюсь, когда он воссоздает DOM.

Если у меня есть только код 1 внутри onClick(), то он будет воссоздавать два <li>, но я просто присваиваю этому значению this.objArr.

Если у меня есть только код кода 2 внутри onClick(), то он не воссоздает два <li>, а просто добавьте еще один <li>. Интересно, как ngFor определить, когда воссоздать DOM.

То, что я хочу сделать, это:

Если я просто нажать больше объект в существующий массив, как я могу позволить ей воссоздать существующий DOM для меня, кроме добавления DOM для толкаемого объекта? Как и в случае 2, я надеюсь, что ngFor может воссоздать первые два <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

Вы можете временно установить objArr обнулить и "сила" Угловое обновить DOM, вызвав detectChanges между ними:

constructor(private cdRef:ChangeDetectorRef) {} 

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