mat-grid-list，带有mat-card和mat-card-actions / mat-card-footer

Question

我有以下代码，角度6和材料设计：

<div class="grid-container">

  <h1 class="mat-h1">Candidatos</h1>

  <mat-grid-list cols="5" gutterSize="20px" class="list-candidatos">

    <mat-grid-tile *ngFor="let candidato of candidatos">

      <mat-card class="candidato-card">

        <mat-card-header>
          <mat-card-title>{{candidato.nome}}</mat-card-title>
        </mat-card-header>

        <mat-card-content>
          &nbsp;
        </mat-card-content>

        <mat-card-actions>
          <button mat-button>Edit</button>
        </mat-card-actions>

      </mat-card>

    </mat-grid-tile>

  </mat-grid-list>

</div>

和CSS

.list-candidatos {
  width: 93%;
  margin: 20px auto;
  margin-top: 60px;
}

.candidato-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

但无论我在css中改变了什么，我都无法将mat-card-actions或mat-card-footer保留在卡的底部。所以：

1. 结构是正确的还是遗漏了什么？
2. 如果它的权利，如何将mat-card-actions / mat-card-footer放在mat-grid-tile的底部？

Answer 1

尝试将mat-card（带或不带页脚，图像或标题）或自定义组件使用mat-card和fxFlex值在div或fxLayout="row wrap中的任何元素，如下所示：

<div fxLayout="row wrap">
    <mat-card *ngFor="let obj of objects" fxFlex="50">{{obj}}</mat-card>
</div>

这个问题类似于this one