How to make a list of cards, each one in its entire width, using a grid in Angular Material?

问题

I work with Angular 6 and Material, and I have a card component

<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>

and I have a component where I display the list of these cards

<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>

but all the cards are displayed to me in one line, and I need each one to occupy the entire line. Please advise me how to solve this problem.

回答1:

for cards why you are using Grid-list use Cards <mat-card *ngFor="let doctor of doctors" >Simple card</mat-card> this might help you

for reference use this : https://material.angular.io/components/card/overview

来源：https://stackoverflow.com/questions/52946166/how-to-make-a-list-of-cards-each-one-in-its-entire-width-using-a-grid-in-angul