如何解决如何使用角度材质和弹性布局创建网格布局
我使用Angular Material和Flex-layout。我有一个卡片页面,我想连续显示4,然后开始新的一行。但是它继续将卡添加到同一行,并迫使我溢出:auto;
这是我的卡片列表页面:
<div class="product-list-wrapper">
<h4>Total products: {{(productList$ | async)?.length }}</h4>
<mat-tab-group>
<mat-tab fxLayout="row wrap" label="Products">
<h1>Product List:</h1>
<div *ngIf="currencyCurrent$" class="products-container">
<div *ngFor="let product of (productList$ | async)">
<div fxFlex="25%" >
<app-single-product *ngIf="product && !product.isRecieved"
(receive)="handleReceived($event)"
[product]="product" [currencyCurrent$]="currencyCurrent$"></app-
single-product>
</div>
</div>
</div>
</mat-tab>
<mat-tab label="Stores">
<app-stores-list [productsList$]="(productList$ | async)" [isRecived]="false">
</app-stores-list>
</mat-tab>
</mat-tab-group>
<div *ngIf="!(productList$ | async)?.length">No products</div>
</div>
和单卡页面:
<mat-card>
<h3>{{product.name}}</h3>
<div class="store-name">{{product.storeName}}</div>
<div *ngIf="currencyCurrent$">
<span *ngIf="priceChoosen; else elseBlock">ILS</span>
<ng-template #elseBlock>USD</ng-template>{{ product.price | currency:
currencyCurrent$: priceChoosen | number : '1.2-2'}}</div>
<div class="date-header">Estimated Delivery Date:</div>
<div>{{product.deliveryDate | date: 'dd/MM/yyyy'}}</div>
<mat-radio-group aria-label="Select an option">
<mat-radio-button (click)="priceChoosen = true" value="shekel"
[checked]="priceChoosen">Shekel</mat-radio-button>
<mat-radio-button (click)="priceChoosen = false" value="usd"
[checked]="!priceChoosen">USD</mat-radio-button>
</mat-radio-group>
<button *ngIf="!product.isRecieved" (click)="handleproductIdemit(product.id)"
mat-raised-button color="primary">Recieved</button>
</mat-card>
任何帮助将不胜感激
谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。