下面是一个使用Angular 7循环复杂对象并填充表格的示例:
首先,创建一个名为user
的复杂对象,包含name
、email
和address
属性:
export class User {
name: string;
email: string;
address: Address;
}
export class Address {
street: string;
city: string;
state: string;
}
然后,在组件中创建一个名为users
的数组,用于存储多个用户对象:
import { Component } from '@angular/core';
import { User } from './user';
@Component({
selector: 'app-root',
template: `
Name
Email
Street
City
State
{{ user.name }}
{{ user.email }}
{{ user.address.street }}
{{ user.address.city }}
{{ user.address.state }}
`
})
export class AppComponent {
users: User[] = [
{
name: 'John Doe',
email: 'john.doe@example.com',
address: {
street: '123 Main St',
city: 'New York',
state: 'NY'
}
},
{
name: 'Jane Smith',
email: 'jane.smith@example.com',
address: {
street: '456 Elm St',
city: 'San Francisco',
state: 'CA'
}
}
];
}
最后,在模板中使用*ngFor
指令循环遍历users
数组,并将每个用户对象的属性填充到表格中。
请注意,User
和Address
类需要在组件中导入,并在users
数组中创建实例对象。
以上示例将生成一个包含用户信息的表格,每行为一个用户对象,每列为一个用户属性。