要实现Angular动态填充表格,你可以使用Angular的数据绑定和结构指令。下面是一个示例解决方法:
export class TableComponent {
tableData = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
}
Name
Age
{{ item.name }}
{{ item.age }}
这样,当组件加载时,表格将根据tableData数组中的数据进行动态填充。
你可以在组件中通过添加或删除tableData数组中的数据来动态更改表格内容。例如,你可以在组件中添加一个按钮,点击该按钮时,向tableData数组中添加一个新的表格行:
export class TableComponent {
tableData = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
addRow() {
this.tableData.push({ name: 'Alice', age: 28 });
}
}
在模板中,你可以使用按钮的点击事件来调用addRow方法:
这样,每次点击按钮时,将向表格中添加一个新的行。
希望这个示例能帮助你实现Angular动态填充表格。