Angular: 当向对象数组中添加一个对象时，通过NgFor生成的表单字段被清空_编程开发

Angular: 当向对象数组中添加一个对象时，通过NgFor生成的表单字段被清空

创始人

2024-10-22 19:01:15

0次

要解决这个问题，你可以通过给对象数组中的每个对象添加一个唯一的标识符，在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属性，确保每个字段的状态被正确地维护，即使在向对象数组中添加新对象时也不会被清空。

上一篇：Angular: 当使用@types/spotify-web-playback-sdk时，找不到命名空间"Spotify"。

下一篇：Angular: 当以编程方式更新URL时，queryParams不起作用

Angular: 当向对象数组中添加一个对象时，通过NgFor生成的表单字段被清空

相关内容

热门资讯