Question

我是初学者，我在项目中使用Angular 4.3.2。我试图制作一个看起来像这样的表:(我有2个数组：传说是枚举，我有项目）

EnumValue1 || item1 | item2 | item3 | item4
EnumValue2 || item5 | item6 | item7 | item8
EnumValue3 || item9 | item10 |第11项| item12
EnumValue4 || item13 | item14 | item15 | item16

我想迭代抛出项目并说出这样的东西来创建新的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

欢迎任何帮助。

编辑部分：描述数组内容 - 我的数组在我的模型中看起来像这样：

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

Angular 4：在* ngfor中使用带有模数的* ngif将新td添加到表中

1 个答案: