角材を使用して動的にカードのグリッドを作成する2

こんにちは、私は角材を初めて使っていますので、r行c列（r X c）という形式のカードのグリッドを動的に作成します。例えば、もし私が5人のユーザを持っているなら、それは以下のようにr = 3とc = 2を作り出すべきです。角材を使用して動的にカードのグリッドを作成する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：1行）でコンテナをいっぱいにします。コンテナが小さくなると、カードアイテムは次の行に移動します（fxLayoutWrapのプロパティから）。