如何解决无法在Angular的单行中使用* ngFor正确地水平显示不同的Mat卡
我必须在horizontally
中*ngFor
连续显示三张卡片,但显示vertically
。这是我的mat-card
的代码。
<div fxFlex="30" *ngIf="mood">
<mat-card *ngFor="let exercise of mood.exercises">
<mat-card-header>
<button mat-button mat-card-avatar><a href={{exercise.link}} target='_blank'><span class="fa fa-play fa-lg"></span></a></button>
<mat-card-title>
<h3>{{exercise.name | uppercase}}</h3>
</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{ BaseURL + exercise.image}}" alt={{exercise.name}}>
<mat-card-content>
<p>{{exercise.description}}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
<span class="flex-spacer"></span>
</mat-card-actions>
</mat-card>
</div>
使用此代码,所有3张卡都将显示为vertically
,但我需要将它们horizontally
带到这里。如果有人可以提出我需要进行的更改,我将非常感激。这是我在显示时面临的问题的屏幕截图,即所有卡都垂直显示
解决方法
在存储卡中使用fxFlex代替od div。
barChartData: ChartDataSets[] = [];
ngOnInit() {
this.barChartData = this.getBarChartData();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。