要解决这个问题,你可以通过给对象数组中的每个对象添加一个唯一的标识符,在NgFor循环中使用该标识符来跟踪每个表单字段的状态。这样,当向对象数组中添加新对象时,已经存在的表单字段不会被清空。
下面是一个示例代码:
在组件中定义一个对象数组和一个计数器变量:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
items = [{ name: 'Item 1' }, { name: 'Item 2' }];
counter = 2;
addItem() {
this.items.push({ name: 'Item ' + (++this.counter) });
}
}
在这个示例中,我们使用items
数组来存储对象,每个对象都有一个name
属性。在表单中使用NgFor
循环来生成输入字段,并使用[(ngModel)]
绑定每个字段的值。
当点击“Add Item”按钮时,addItem()
方法会将一个新的对象添加到items
数组中,并自动更新视图中的表单字段。
这种方法通过为每个表单字段添加唯一的name属性,确保每个字段的状态被正确地维护,即使在向对象数组中添加新对象时也不会被清空。