Angular2 ngFor：何時添加/刪除DOM？ 如何強制它重新創建DOM？

Question

我正在使用Angular2 * ngFor，並且在重新創建DOM時有些困惑。

如果我在onClick()只有案例1的代碼，那么它將重新創建兩個<li> ，但是我只是將相同的值分配給this.objArr。

如果我在onClick()只有案例2代碼，那么它不會重新創建兩個<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

您可以通過在以下兩者之間調用detectChanges來將objArr臨時設置為null並“強制” Angular來更新DOM：

constructor(private cdRef:ChangeDetectorRef) {}

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