Динамически создавайте карты и выстраивайте их макет с помощью Flex

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 таким образом, он обернет содержимое и автоматически выровняет карты в соответствии с доступным состоянием экрана.