在Angular中循环表格行可以使用ngFor指令来实现。下面是一个示例代码:
在组件的HTML模板中,使用ngFor指令来循环表格行。假设你有一个名为rows
的数组,其中包含了要显示在表格中的行数据:
列标题1
列标题2
列标题3
{{ row.column1 }}
{{ row.column2 }}
{{ row.column3 }}
在组件的Typescript文件中,定义一个名为rows
的数组,并为其提供一些示例数据:
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
rows = [
{ column1: '行1列1', column2: '行1列2', column3: '行1列3' },
{ column1: '行2列1', column2: '行2列2', column3: '行2列3' },
{ column1: '行3列1', column2: '行3列2', column3: '行3列3' }
];
}
在上面的代码中,rows
数组包含了3个对象,每个对象代表一行数据,每个对象包含了3个属性(column1、column2和column3),分别对应表格中的3列数据。
通过以上代码,你可以在Angular应用中循环表格行并显示相应的数据。