在Angular中创建动态表格可以通过以下几个步骤实现:
export class TableComponent {
tableData: any[] = [
{ name: 'John', age: 30, city: 'New York' },
{ name: 'Alice', age: 25, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' }
];
}
*ngFor
来循环遍历表格数据,并动态生成表格的列和行。
Name
Age
City
{{row.name}}
{{row.age}}
{{row.city}}
export class TableComponent {
tableData: any[] = [
{ name: 'John', age: 30, city: 'New York' },
{ name: 'Alice', age: 25, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' }
];
addRow() {
this.tableData.push({ name: 'New Name', age: 0, city: 'New City' });
}
deleteRow(index: number) {
this.tableData.splice(index, 1);
}
updateRow(index: number, field: string, value: any) {
this.tableData[index][field] = value;
}
}
...
{{row.name}}
{{row.age}}
{{row.city}}
这样就实现了一个简单的动态表格。你可以根据需要自定义表格的样式和功能。