使用 Flex 动态创建卡片并安排其布局

Question

我想创建 mat-cards 并在其中包含一些内容。卡片的数量可能因 api 的内容而异（如果 api 给我 5 个参数的数据，则必须创建 5 张卡片）这些卡片必须像 3 或 4 排一样对齐。尝试谷歌搜索如何做，但找不到。有人能帮我吗？

<div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
 </div>

这给出了连续 5 个元素。我希望第 5 个元素在新行中开始，因为 fxFlex 百分比总和已达到 100%。

<div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
 </div>

 <div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
 </div>

当我这样做时效果很好。

但是当卡片数量动态变化时，我如何使用 ngFor 来做到这一点？

Answer 1

在模板的属性wrap中使用：fxLayout

<div fxLayout="row wrap" fxLayoutAlign="center">
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
</div>

看stackblitz example here。