css - 将 *ngFor 与特定列设计结合使用

Question

如何在parent下制作4个重复n次的div？例如:

<div class="container" *ngFor="let item of items">
        <div class="parent">
            <div>{{item.name}}</div>
            <div>{{item.name}}</div>
            <div>{{item.name}}</div>
            <div>{{item.name}}</div>
        </div>
        <div class="parent">
            <div>{{item.name}}</div>
            <div>{{item.name}}</div>
            <div>{{item.name}}</div>
            <div>{{item.name}}</div>
        </div>
    </div>

输出应该是:

[1] [2] [3] [4]
[5] [6] [7] [8]

Answer 1

您必须实现一个将一维数组转换为二维数组的函数，这样您就可以使用两个 *ngFor 循环。

请看这个Stackblitz with a working example .

相关代码:

HTML:

<div class="container" >  
    <div class="parent" *ngFor="let row of getGroupedItems()" >
        <div class="item" *ngFor="let item of row">{{item}}</div>        
    </div>    
</div>

TS:

items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8']

getGroupedItems() {
    let grouped = [];
    for (let i = 0; i < this.items.length; i++) {
      const j = Math.floor(i / 4);
      if (i % 4 == 0) {
        grouped[j] = []
      }
      grouped[j].push(this.items[i]);
    }
    return grouped;
  }