要实现Angular中的通用表格组件,循环对象的值,可以按照以下步骤操作:
创建一个新的Angular项目:
ng new table-component
进入项目目录:
cd table-component
安装Angular Material和Flex布局:
ng add @angular/material
创建一个通用表格组件:
ng generate component table
在table.component.html
文件中添加以下代码:
{{ column }}
{{ element[column] }}
在table.component.ts
文件中添加以下代码:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
@Input() dataObject: any;
columns: string[];
ngOnChanges(): void {
this.columns = Object.keys(this.dataObject[0]);
}
}
在父组件中使用通用表格组件:
在app.component.html
文件中添加以下代码:
在app.component.ts
文件中添加以下代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data = [
{ name: 'John', age: 30, city: 'New York' },
{ name: 'Alice', age: 25, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' }
];
}
运行项目:
ng serve
打开浏览器,访问http://localhost:4200
,即可看到通用表格组件循环对象的值的效果。
以上就是使用Angular实现通用表格组件,循环对象的值的解决方法。