如何使用 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

对于卡片为什么你使用网格列表使用卡片 <mat-card *ngFor="let doctor of doctors" >Simple card</mat-card>这可能对你有帮助

供参考使用：https://material.angular.io/components/card/overview