如何使用ngFor创建新行

Question

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

然后，如果col div大于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