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>

在某些情况下，我使用 splice.Please 插入新元素，查找下面的代码

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);

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

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

ngModel 值未显示在 angular2 的控件中

ngModel values are not getting displayed in controls in angular2

angular2-directives

angular2-template

angular