如何使用 ngFor 创建新行 [重复]

Question

我正在尝试使用 *ngFor:<div class="row"> <div class="col-lg-3" *ngFor="let user of users">{{user.username}}</div> </div> 创建新行

然后，如果 col div`s > 4，我需要创建新行。 我该怎么做？

Answer 1

如果要使用 ngFor 创建行类的 div 元素，则将指令放入该 div 中。

ngFor 将添加内容包括写入它的 div

所以在你的例子中，它将是

HTML

<div class="row" *ngFor="let row of rows;let i = index">
   <div class="col" *ngFor="let col of row;let j = index">
     Row {{i}} Col {{ j }}
   </div>
</div>

TS

export class AppComponent  {
  public rows = [
    [1,1,1,1],
    [1,1],
    [1,1,1]
  ]
}

工作示例：stackblitz.com