我有超过1000种设计和设计随着时间的推移而增加。
我希望以200 * 200大小并排显示图像,并在到达结束时开始显示下一行。
这是我的代码。
<div fxLayout="row" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="center">
<mat-card
*ngFor="let design of designs" >
<img mat-card-image src="data:image/jpg;base64, {{ design.data }}" />
<div>
<mat-card-title>{{ design.name }}</mat-card-title>
<mat-card-subtitle>{{ design.code }}</mat-card-subtitle>
</div>
</mat-card>
</div>
我试图使用ngFor Link完成相同但更多的响应方式
如何使用Flex Layout执行此操作?
这适合我
<div
class="container"
fxLayout="row wrap"
fxLayoutAlign="center"
fxLayoutGap.xs="0" >
<div class="item" fxFlex="10%" *ngFor="let design of designs">
<div style="padding:5px">
<div fxLayoutAlign="center">
<img
width="120"
height="120"
data-bind="attr: { src: thumbnail }" />
</div>
<div fxLayoutAlign="center">
{{ design.name }}
</div>
<div fxLayoutAlign="center">
{{ design.code }}
</div>
</div>
</div>
</div>