Angular ngFor动态添加对象_编程开发

Angular ngFor动态添加对象

创始人

2024-10-20 08:02:27

0次

可以使用Angular的*ngFor指令来动态添加对象。下面是一个示例代码：

在组件的HTML模板中，使用*ngFor指令来循环遍历一个对象数组，并动态添加对象。


  {{ item.name }}

在组件的TypeScript文件中，定义一个空的对象数组，并在添加对象的方法中向数组中添加新的对象。

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  items: any[] = [];

  addItem() {
    const newItem = { name: 'New Item' };
    this.items.push(newItem);
  }
}

在上面的示例中，点击“添加对象”按钮时，会向items数组中添加一个新的对象，并在模板中使用*ngFor指令动态添加新的div元素来显示新的对象的名称。

请注意，上面的示例中使用了一个任意类型的对象数组，你可以根据你的需求定义自己的对象类型，并在添加对象时传入相应的属性值。

上一篇：Angular ngFor动态属性

下一篇：Angular ngFor对我的对象不可用

Angular ngFor动态添加对象

相关内容

热门资讯