Angular6中如何使用ngFor让卡片保持连续？

Question

ngFor 生成的卡片相互堆叠而不是排成一排。

我正在通过 ngFor 生成卡片。我为每张卡片使用 fxFlex="30"，但它们相互堆叠。我也用了 flex-wrap 但没用。

<div fxFlex *ngIf="designs" [@expand]>
  <div fxLayout="column" fxLayout.gt-sm="row" style="display: inline" *ngFor="let design of designs">
    <div fxFlex="30">
      <mat-card>
        <mat-card-header>
          <mat-card-title>
            <h2>{{design.label}}</h2>
          </mat-card-title>
          <mat-card-subtitle>
            <h3>{{design.time}}hr</h3>
          </mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src="{{BaseURL + design.image}}">
        <mat-card-content>
          <p>{{design.description}}</p>
        </mat-card-content>
        <mat-card-actions style="margin: auto;">
          <button mat-stroked-button routerLink="/contact" color="primary">Book Now</button>
        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</div>

我希望我生成的卡片应该排成一行。但实际上它们是相互堆叠的。

Answer 1

注意 Angular flex layout page 上的小细节很重要。由于在使用 flex 之前我对 flex 不太熟悉，所以刚开始时这种事情让我好几次。

使用 fxLayout 主要是告诉元素它将成为什么样的容器。在这种情况下，您可能希望将 *ngFor 移动到与 fxFlex="30" 相同的 div，幸运的话，您可能能够将它们都移动到卡上。

<div fxFlex *ngIf="designs" [@expand]>
  <div fxLayout="column" fxLayout.gt-sm="row" style="display: inline">
    <div fxFlex="30" *ngFor="let design of designs">

根据您的需要，Grid 也可能有很大帮助。

Angular6中如何使用ngFor让卡片保持连续？

How to use ngFor to make cards remain in a row in Angular 6?

ngfor

angular

mat-card