要渲染嵌套对象中的数据,你可以使用 Angular Material 的 MatTableDataSource 和 MatTable 控件。以下是一个示例解决方法:
首先,创建一个名为 "DataSourceExampleComponent" 的组件,并在其 HTML 文件中添加以下代码:
Name
{{ element.name }}
Age
{{ element.age }}
Address
{{ element.address.street }}, {{ element.address.city }}, {{ element.address.country }}
然后,在组件的 TypeScript 文件中,添加以下代码:
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-data-source-example',
templateUrl: './data-source-example.component.html',
styleUrls: ['./data-source-example.component.css']
})
export class DataSourceExampleComponent implements OnInit {
// 定义表格列
displayedColumns: string[] = ['name', 'age', 'address'];
// 嵌套对象的数据
dataSource: MatTableDataSource;
ngOnInit() {
// 模拟嵌套对象的数据
const data = [
{ name: 'John', age: 25, address: { street: '123 Main St', city: 'New York', country: 'USA' } },
{ name: 'Jane', age: 30, address: { street: '456 Elm St', city: 'Los Angeles', country: 'USA' } }
];
this.dataSource = new MatTableDataSource(data);
}
}
最后,将该组件添加到你的模块中并进行渲染:
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { DataSourceExampleComponent } from './data-source-example.component';
@NgModule({
declarations: [
DataSourceExampleComponent
],
imports: [
BrowserAnimationsModule,
MatTableModule
],
providers: [],
bootstrap: [DataSourceExampleComponent]
})
export class AppModule { }
以上示例将在表格中渲染嵌套对象的数据。你可以根据需要调整表格的列和数据。