将材料卡包裹在 ngFor 中答案

【问题标题】：Wrap material cards inside an ngFor将材料卡包裹在 ngFor 中
【发布时间】：2018-04-19 23:13:58
【问题描述】：

当用户进行搜索时，我正在从 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;
}

服务正在运行，并且组件 ts 逻辑。

我的问题是当我使用fxLayoutWrap 包装内容时，当 fxFlex 获得 100 的值时，材料卡没有换行。

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

这是我的问题的屏幕截图

【问题讨论】：

标签： html css angular angular-material angular-flex-layout

【解决方案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。为您验证上面的代码。

【讨论】：

【解决方案2】：

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

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

【讨论】：