Question

当用户进行搜索时，我正在从Api生成卡片。

我有电影列表组件，我在其中显示我的卡

这是HTML

<div fxLayout='row' fxLayoutWrap class="cards">

  <div fxFlex="20" class="example-card" *ngFor="let film of dataResult.results">
    <mat-card>
      <mat-card-header>
        <mat-card-title>{{film.title}}</mat-card-title>
        <mat-card-subtitle>{{film.release_date}}
        </mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          {{film.overview}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>
          <mat-icon>favorite</mat-icon>
        </button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

和CSS

.example-card {
    min-width: 100%;
    margin: 40px;

}
.cards {
    width: 400px;
}

服务正在运行，也是组件逻辑。

我的问题是当fxFlex获得100的值时，当我使用fxLayoutWrap来包装内容时，素材卡不会换行到新行。

这是stacklitz demo（我在调用API时遇到https错误，如果有人可以修复它，我将不胜感激）

以下是我的问题的截图

Answer 1

<div fxLayout='row' fxLayoutWrap class="cards">

<div fxFlex="20" class="example-card">
<mat-card *ngFor="let film of dataResult.results" style="margin-top:10px;>
  <mat-card-header>
    <mat-card-title>{{film.title}}</mat-card-title>
    <mat-card-subtitle>{{film.release_date}}
    </mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      {{film.overview}}
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

由于重复代码没有问题，因此必须确保将重复命令以及代码的本质放置在智能设计材料中，并且代码在没有空格的情况下进行了合并，因此必须为他们分开写CSS样式margin-top：10px。为您验证上面的代码。

Answer 2

fxLayout属性可以使用第二个参数“ wrap”，它将执行您要查找的操作。

<div fxLayout="row wrap"></div>

在ngFor中包裹材料卡片

2 个答案: