要遍历项目数组并在Angular Material表格中显示该数据,您可以按照以下步骤操作:
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
projects = [
{ name: 'Project 1', description: 'Description 1' },
{ name: 'Project 2', description: 'Description 2' },
{ name: 'Project 3', description: 'Description 3' }
];
}
Name
{{ project.name }}
Description
{{ project.description }}
在这个示例中,我们使用mat-table
指令来创建一个Angular Material表格。然后,我们使用matColumnDef
指令定义了两列,分别是name
和description
。在对应的th
和td
元素中,我们使用*matHeaderCellDef
和*matCellDef
指令来定义表头单元格和单元格中的数据。最后,我们使用matHeaderRowDef
和matRowDef
指令来定义表头行和数据行的绑定。
MatTableModule
:import { MatTableModule } from '@angular/material/table';
@NgModule({
imports: [
MatTableModule
],
// ...
})
export class AppModule { }
通过这些步骤,您就可以在Angular Material表格中遍历项目数组的数据了。