使用角度材質動態創建卡片網格

嗨，我是新角度材料，我想創建形式爲r行c列（r X c）的卡片網格動態。例如，如果我有5個用戶，那麼它應該創建r = 3和c = 2，如下所示。使用角度材質動態創建卡片網格

user1 user2 
user3 user4 
user5

我實現它，如下所示：

<md-grid-list cols="2" rowHeight="200px" gutterSize="10px"> 
    <md-grid-tile class="divcls" *ngFor="let user1 of users"> 

    <md-card fxLayoutWrap="wrap" fxLayout="column" fxFlex="90%" fxLayoutGap="16px"> 
     <md-card-title>User : {{user1.name}}</md-card-title> 
     <md-card-content>{{user1.details}}</md-card-content> 
     <md-card-actions> 
    <button md-button>LIKE</button> 
    <button md-button>SHARE</button> 
    </md-card-actions> 
     </md-card> 

    </md-grid-tile> 
</md-grid-list>

這是正確的做法？因爲當我嘗試調整窗口大小時，它將與卡和網格單元重疊。我在互聯網上查過，但沒有找到任何清潔的方法與純角材料的方式。請指導我以比上述更好的方法實現相同的目標。

來源

2017-07-09 Sarang Shinde

你可以分享plunker？ – webcoder

那麼我有一個類似的任務，創建一個動態顯示/過濾產品列表。

首先，我會建議創建一個新的組件，負責顯示卡。

/* Card component */ 
<md-card> 

    <md-card-header> 
    <md-card-title class="md-card-title">{{cardTitle}}</md-card-title> 
    </md-card-header> 

    <img md-card-image [src]="cardImagePath"> 

    <md-card-content> 
    <div class="card-text-content"> 
     {{cardShortDescription}} 
    </div> 
    </md-card-content> 

    <md-card-actions fxLayout="row" fxLayoutAlign="end center"> 
    <button md-button (click)="addProductToCart()">ADAUGA IN COS</button> 
    <button md-button (click)="openDialog()">DETALII</button> 
    </md-card-actions> 

</md-card>

然後創建一個卡組，其中包含要顯示的卡組。

現在爲了與您想要展示的產品數量保持一致，並且要記住您可能想要分頁並且卡片要有響應，您必須展示一些卡片，其中除以2，3，4，6（12或24） - 用於卡片組有響應的情況，並且您仍希望所有行都顯示卡片。

/*Card deck component */ 
    <div fxLayout="row" fxFlex.md="70" fxLayoutWrap class="card-deck-container mat-elevation-z4"> 
     <div fxFlex *ngFor="let product of productsDisplayed" class="card-item"> 
     <app-card [ngStyle]="{'width':'300' + 'px'}" [product]="product"></app-card> 
     </div> 

     <div class="paginator mat-elevation-z4" *ngIf="productsDisplayed.length !== 0"> 
     <md-paginator 
      [length]="paginatorSize" 
      [pageSize]="numberOfProductsDisplayedInPage" 
      [pageSizeOptions]="[12, 24]" 
      (page)="updateProductsDisplayedInPage($event)"> 
     </md-paginator> 
     </div> 
    </div>

卡甲板組件CSS

.card-deck-container { 
    width: 100%; 
    max-width: 1200px; 
    position: relative; 
    border-radius: 2px; 
    padding: 10px 10px 30px; 
    margin: 10px 10px 10px 10px; 
    background-color: #f5f5f5; 
} 

.card-item { 
    padding: 3px 3px 3px 3px; 
}

主要在這裏的是在CSS。卡片包容器的最大寬度爲1200px，根據每張卡片的寬度，最多可填充4張卡片（4張卡片* 300px = 1200px：一行）。如果容器變小，卡片項目將繼續下一行（來自fxLayoutWrap屬性）。