Как составить список карточек, каждая на всю ширину, используя сетку в Angular Material?

Question

Я работаю с Angular 6 и Material, и у меня есть компонент карты

<mat-card>
<mat-grid-list cols="12">            
    <mat-grid-tile colspan="3"><img [src]="urlAvatar" style="width:250px;height:200px"></mat-grid-tile>
    <mat-grid-tile colspan="6">{{doctor.SecondName}} {{doctor.FirstName}} {{doctor.ThirdName}}</mat-grid-tile>
    <mat-grid-tile colspan="3">{{doctor.Specialization}}</mat-grid-tile>
</mat-grid-list>
</mat-card>

, и у меня есть компонент, где я отображаю список этих карт

<mat-grid-list cols="12">
  <mat-grid-tile colspan="4">Filter Panel</mat-grid-tile>
  <mat-grid-tile colspan="8">
    <app-doctor-list-item style="width:100%" *ngFor="let doctor of doctors" [doctor]="doctor">
    </app-doctor-list-item>
  </mat-grid-tile>
</mat-grid-list>

, но всекарты отображаются для меня в одну строку, и мне нужно, чтобы каждая из них занимала всю строку.Посоветуйте, пожалуйста, как решить эту проблему.

Answer 1

для карт, почему вы используете Grid-list, используйте Карты <mat-card *ngFor="let doctor of doctors" >Simple card</mat-card>, это может помочь вам

для справки: https://material.angular.io/components/card/overview