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

您可以暂时将objArr设为空，然后强制使用＃34} Angular通过在中间调用detectChanges来更新DOM：

constructor(private cdRef:ChangeDetectorRef) {}

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

Angular2 ngFor：添加/删除DOM时？如何强制它重新创建DOM？

1 个答案: