2

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>

我希望我生成的卡片应该是连续的。但实际上它们是相互叠加的。

4

1 回答 1

3

注意Angular flex 布局页面上的小细节很重要。这种事情在刚开始时让我好几次，因为我在使用它之前对 flex 并不熟悉。

使用fxLayout主要告诉元素它将成为什么样的容器。在这种情况下，您可能希望将您的 div 移动*ngFor到具有 的同一个 div 中，fxFlex="30"如果幸运的话，您也许可以将它们都移动到卡片上。

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

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

于 2019-01-18T21:28:18.270 回答