要实现Angular ngFor以每行显示两个项目,可以使用以下代码示例:
在HTML模板中:
{{ item }}
在组件的.ts文件中:
export class MyComponent {
items: any[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];
getRows() {
const rows = [];
for (let i = 0; i < this.items.length; i += 2) {
rows.push(this.items.slice(i, i + 2));
}
return rows;
}
}
在上述代码中,我们首先在HTML模板中使用ngFor指令来遍历项目数组,然后使用Bootstrap的栅格系统将每个项目放在一个列中。这样,每行将包含两个项目。
在组件的.ts文件中,我们定义了一个名为getRows
的方法,该方法将原始的项目数组切割成每行包含两个项目的二维数组。我们通过调用getRows
方法来获取切割后的数组,并在ngFor指令中使用它来遍历每行的项目。
请注意,上述代码假设您已经安装并导入了Bootstrap样式。如果您没有使用Bootstrap,您可以使用其他CSS框架或自定义样式来实现每行两个项目的布局。