ngFor在array.push

Question

我的模板中有这个：

<input type="button" value="add" (click)="addEnvVar()"/>
<div *ngFor="let envVar of application.env_vars">
    <input type="text" name="key" [(ngModel)]="envVar.key">
    <input type="text" name="value" [(ngModel)]="envVar.value">
</div>

addEnvVar()背后的代码： this.application.env_vars.push({key:'', value:''});

初始化组件时，env_vars内有一个对象，并且渲染得很好（填充了<input>个字段）。单击“添加”后，我可以在控制台中看到env_vars中确实有两个对象（第二个是我刚添加的'空'对象），在视图中确实有两个<div>个envVar，但所有4个<input>字段都为空。

我做错了什么？

更新

我认为问题是当ngFor产生多个div时，每个div中的输入都会获得相同的硬编码name属性（在我的case - “key”和“value”），并且值以某种方式与之相关联。我将name="key"更改为name="key_{{i}}"（i是一个包含ngFor索引属性的模板变量。）

问题是，这是要走的路吗？或者我还缺少什么？

Answer 1

像这样的错误的罪魁祸首很可能是跟踪引用的默认$userdata->location = $this->input->post('test'); 函数。即使数据没有改变，但引用发生了变化，它也会拆除DOM并重新构建它，这意味着输入字段中的所有数据都将被清除。

组件

trackBy

模板

trackBy(index) { return index }

不幸的是，如果没有复制品我就无法测试它。但是，JB Nizet的评论是对的，你应该遵循这个建议;这是一个更适合反应形式的任务，而不是模板形式。