如何使用 Angular Material 中的网格制作一张卡片列表，每张卡片都在其整个宽度内?

问题描述

我使用 Angular 6 和 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.

推荐答案

forcards 为什么你使用 Grid-list use Cards<mat-card *ngFor="让医生的医生">简单的卡片</mat-card>这可能对你有帮助

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

作为参考使用这个:https://material.angular.io/components/card/概述

这篇关于如何使用 Angular Material 中的网格制作一张卡片列表，每张卡片都在其整个宽度内?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！