我是初学者,我在我的项目中使用 Angular 4.3.2。 我正在尝试制作一个看起来像这样的表格:(我有 2 个数组:图例是一个枚举,我有项目)
- 枚举值1 ||项目 1 |项目2 |项目3 | item4
- 枚举值2 ||项目5 |项目6 |项目 7 | item8
- 枚举值3 ||项目9 | item10| item11| item12
- 枚举值4 || item13| item14| item15| item16
我想迭代 throw 项目并说这样的话来创建新的 td :
*ngif="items.length%4==0
我有这个 html 代码:
<tr *ngFor="let enum of enums">
<th>{{enum}}</th>
<ng-container *ngFor="let item of items">
<td *ngIf="items.length%4==0">{{item .id}}</td>
</ng-container>
</tr>
但它什么也没显示。
此代码在每一行显示我的所有项目:
<tr *ngFor="let enum of enums">
<th>{{enum}}</th>
<ng-container *ngFor="let item of items">
<td>{{item.id}}</td>
</ng-container>
</tr>
我不知道怎么办。我试着按照这个例子,但我不能把两个 *ng 放在一个标签中:example with angular JS 1.3
欢迎任何帮助。
编辑部分:描述数组内容-- 我的数组在我的 model.ts 中看起来像这样:
export enum enums{
'EnumValue1',
'EnumValue2',
'EnumValue3 ',
'EnumValue4 '
}
在我的组件中,我检索我的枚举:
keys(): Array<string> {
const keys = Object.keys(enums);
return keys.slice(keys.length / 2);
}
我的项目是一个对象的属性,在我的组件中它看起来像这样:
export class MyDialogComponent implements OnInit {
items: Item[];
object: Object;
[...constructor]
ngOnInit() {
this.items = this.object.items;
}
}
我的对象是在打开弹出窗口以编辑此对象时定义的。
--结束编辑
最佳答案
你只需要这个 items.slice(i*4 , (i+1)*4)
:
<table>
<tr *ngFor="let enum of enums;let i = index;">
<th>{{enum}}</th>
<ng-container *ngFor="let item of items.slice(i*4 , (i+1)*4)">
<td>{{item}}</td>
</ng-container>
</tr>
</table>
关于javascript - Angular 4 : add new td to table with *ngif with modulo in an *ngfor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48580675/