Question

我想创建垫卡并在其中包含一些内容。卡的数量可以根据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。

Answer 2

<div style="display:flex; flex-wrap:wrap; justify-content:flex-start">
    <div *ngFor="let card of Cards">
        <mat-card style="width:YOUR-DESIRED-WIDTH"></mat-card>
    </div>
</div>

我将您的卡片视为卡片阵列。如果我们这样使用flex，它将包装内容并根据可用的屏幕属性自动对齐卡片。

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

2 个答案: