在Angular中动态填充表格可以通过以下步骤实现:
dynamic-table
,使用Angular CLI命令行工具生成组件。ng generate component dynamic-table
dynamic-table.component.html
文件中,添加一个表格元素,并使用Angular的指令*ngFor
来循环遍历数据并动态生成表格行。
姓名
年龄
{{ item.name }}
{{ item.age }}
dynamic-table.component.ts
文件中,定义一个数据属性data
,并初始化为一个包含姓名和年龄的对象数组。import { Component } from '@angular/core';
@Component({
selector: 'app-dynamic-table',
templateUrl: './dynamic-table.component.html',
styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent {
data = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
];
}
dynamic-table
组件,并在模板中使用。
通过以上步骤,你就可以在Angular中实现动态填充表格的功能了。注意,你可以根据实际需求修改表格结构和数据源。