ngModel 值未显示在 angular2 的控件中

Posted 2023-02-22

【中文标题】ngModel 值未显示在 angular2 的控件中

【英文标题】：ngModel values are not getting displayed in controls in angular2

【发布时间】：2017-09-26 15:13:23

【问题描述】：

我有一个模型，它是一个数组元素，它对应的 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 设置为以前的值，但在输入控件中看不到值。

请找图片

【问题讨论】：

问题对我来说似乎有点不清楚，你能不能尝试在一个 plunker 中重新创建这个问题，我很乐意看看 :)

【参考方案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() 来反映更改。

【讨论】：

谢谢...在阅读您的解决方案之前，我感到非常沮丧。不知道为什么 Angular 会感到困惑

感谢您的回答！我有同样的问题，它节省了我的时间。你能解释一下为什么会这样吗？

@VõĐạiThắng，我真的不确定。可能是 Angular 的变更检测是这样构建的。