如何使用角度材质和弹性布局创建网格布局

问题描述

我使用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 (将#修改为@）