Question

在父项下重复n次的4个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;
  }

在特定的列设计中使用* ngFor

1 个答案: