如何使用Angular Material中的网格制作一张卡片列表,每张卡片的整个宽度? [英] How to make a list of cards, each one in its entire width, using a grid in Angular Material?
本文介绍了如何使用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.
推荐答案
对于卡,为什么要使用网格列表,请使用卡
<mat-card *ngFor="let doctor of doctors" >Simple card</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中的网格制作一张卡片列表,每张卡片的整个宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文