如何将*NgFor生成的内容按行和列排序(FlexLayout)Angular

Question

我正在尝试将*NgFor生成的元素排序为每行3个元素。

目前，该代码将"；cont"；在一行中。

<div fxLayout="row">
<mat-card  *ngFor="let item of cont">
<p>{{item.title}}</p>
</mat-card>
</div>

但我想要一些类似的东西：

项目标题1项目标题2项目标题3

第4项第5项第6项

Answer 1

不确定这是否会像我看到的那样对flex布局有所帮助，但如果你使用显示网格来实现这一点呢。

你会有这样的东西：

<div class="grid">
<mat-card  *ngFor="let item of cont">
<p>{{item.title}}</p>
</mat-card>
</div>

在你的css中，你可以有

.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

这样，每行总是有3个元素

示例：https://stackblitz.com/edit/angular-ivy-s5swyy?file=src%2Fapp%2Fapp.component.html，src%2App%2App.component.ts，src%2 App%2App.module.ts，package.json，src%2Fapp%2App.component.css

Answer 2

好吧，你可以这样做。

给你的父div一个100%的宽度，然后给你的垫卡每个33.3%的宽度&然后给flexdiv(父div(flex-wrap属性，这将允许每4张垫卡转移到另一行。

<div class="d-flex flex-wrap w-100">
<mat-card *ngFor="let item of cont" class="w-33">
<p>{{item}}</p>
</mat-card>
</div>

.w-33 {
width: 33.3%;
}