下面是一个使用Angular 6创建动态列和行的HTML表格的解决方案。
首先,创建一个名为table.component.ts
的组件文件,并添加以下代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
tableData: any[] = [
{ name: 'John', age: 25, email: 'john@example.com' },
{ name: 'Jane', age: 30, email: 'jane@example.com' },
{ name: 'Tom', age: 35, email: 'tom@example.com' }
];
tableHeaders: string[] = Object.keys(this.tableData[0]);
constructor() { }
ngOnInit() {
}
}
接下来,在同一目录下创建一个名为table.component.html
的HTML模板文件,并添加以下代码:
{{ header }}
{{ row[header] }}
最后,在同一目录下创建一个名为table.component.css
的CSS文件,并添加以下代码:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
现在,将TableComponent
添加到你的应用中的适当位置,例如在app.component.html
中添加以下代码:
当你启动应用时,将会看到一个包含动态列和行的HTML表格,表头将基于tableData
数组中的对象属性动态生成,而表格行将根据tableData
数组中的对象动态生成。