javascript - Angular 4 : add new td to table with *ngif with modulo in an *ngfor

Question

我是初学者，我在我的项目中使用 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;
    }
}

我的对象是在打开弹出窗口以编辑此对象时定义的。

--结束编辑

Answer 1

你只需要这个 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>

WORKING DEMO