mat-grid-list с mat-card и mat-card-actions / нижний колонтитул для mat-card

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 я не смогдля выполнения действий с мат-картой или нижнего колонтитула с матом в нижней части карты.Итак:

1. Структура правильная или чего-то не хватает?
2. Если это правильно, как поместить нижний колонтитул действия карты / нижний колонтитул в нижней части коврика-сетка-плитка?

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>

Этот вопрос похож на этот