以下是一个示例,展示了如何使用Angular 7创建一个迭代表格:
HTML模板:
Name
Age
City
{{ person.name }}
{{ person.age }}
{{ person.city }}
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
people = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Jane', age: 30, city: 'Los Angeles' },
{ name: 'Mike', age: 35, city: 'Chicago' }
];
}
在这个示例中,我们首先在HTML模板中创建一个表格,使用Angular的*ngFor指令来迭代人员数组,并在表格中显示每个人员的姓名、年龄和城市。
然后,在组件代码中,我们在people数组中定义了一些人员数据。这些数据将会在HTML模板中使用。
最后,我们将TableComponent作为一个组件在另一个组件中使用,以在应用程序中显示表格。
请注意,为了使这个示例正常工作,您需要确保在Angular应用程序中正确引入和配置TableComponent组件。