ngModel 值未显示在 angular2 的控件中

Question

我有一个模型，它是一个数组元素，它对应的 HTML 视图如下：

<div *ngIf="flag" >
        <table id="table" class="table table-hover table-bordered  table-mc-light-blue">
           <thead>
               <tr>
                   <th>col 1</th>
                   <th>col 2</th>
                   <th>col 3</th>
               </tr>
            </thead>
            <tr *ngFor="let item of collection;">
                 <td>{{item.col1}}</td>
                 <td>
                    <input type="text" class="form-control" [(ngModel)]="item.col2" #input="ngModel" name="input-{{i}}">
                 </td>
             </tr>
         </table>
     </div>

在某些情况下，我使用拼接插入新元素。请在下面找到代码

this.collection.splice(LastIndex, 0, ...newArray);

问题是在插入后，某些记录没有显示以前的 ngModel 值。 我检查了元素，发现 ng-reflect-model 设置为以前的值，但在输入控件中看不到值。

请找图片

Answer 1

我通过如下修改我的逻辑使其工作：

    let tempCollection = this.collection.slice();

    //empty the list       
    this.collection = [];

    this.changeDetectorRef.detectChanges(); //needed to reflect changes

    //insert elements in the list
    tempCollection.splice(LastIndex, 0, ...elements);

    //push once again to collection
    this.collection.push(...tempCollection);

我没有直接操作 collection，而是将其复制到名为 tempCollection 的临时变量中进行操作，并清除了 collection 变量。 p>

操作完成后，我将整个 tempCollection 推送到 collection。 清除集合后，我使用 this.changeDetectorRef.detectChanges() 来反映更改。