使用 Angular Material 2 动态创建卡片网格 [英] Creating Grid of Cards Dynamically using Angular Material 2

查看：24
本文介绍了使用 Angular Material 2 动态创建卡片网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 Angular Material 的新手，我想创建 r 行 c 列 (r X c) 动态.例如，如果我有 5 个用户，那么它应该创建 r=3 和 c=2 如下.

user1 user2用户 3 用户 4用户 5

我是这样实现的:

<md-grid-tile class="divcls" *ngFor="let user1 of users"><md-card fxLayoutWrap="wrap" fxLayout="column" fxFlex="90%" fxLayoutGap="16px"><md-card-title>用户:{{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>

这是正确的方法吗?因为当我尝试调整窗口大小时，它会与卡片和网格单元重叠.我在互联网上查了一下，但没有找到任何纯角材料方式的干净方法.请指导我用比上面更好的方法实现相同的目标.

解决方案

我有一个类似的任务，即创建要动态显示/过滤的产品列表.

首先，我建议创建一个负责显示卡片的新组件.

/* 卡片组件 */<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}}

</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)- 用于卡片组具有响应性并且您仍然希望所有行都显示卡片的情况.

/*卡片组组件*/<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 class="paginator mat-elevation-z4" *ngIf="productsDisplayed.length !== 0"><md-分页器[长度]="paginatorSize"[pageSize]="numberOfProductsDisplayedInPage"[pageSizeOptions]="[12, 24]"(page)="updateProductsDisplayedInPage($event)"></md-paginator>

卡片组组件 CSS

.card-deck-container {宽度:100%；最大宽度:1200px；位置:相对；边界半径:2px；填充:10px 10px 30px；边距:10px 10px 10px 10px；背景色:#f5f5f5；}.card-item {填充:3px 3px 3px 3px；}

这里的主要内容是 CSS.卡片组容器的最大宽度为 1200 像素，并且根据每张卡片的宽度，它将用最多 4 张卡片填充容器(4 张卡片 * 300px = 1200px :一行).如果容器变小，卡片项目将在下一行(来自 fxLayoutWrap 的属性).

我将很快发布一个 plunker 示例.希望这有助于到那时.附言不要试图理解这些来自产品的信息在说什么 :)

Plunker 示例https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview(使用 Google Chrome)

显示的项目可以根据与可能的分页组件的交互进行更改.但是，您必须将所有产品/项目保留在一个数组中，并且您将拥有另一个显示产品/项目的数组.

希望这有帮助:).

也不要忘记 Angular Flex 项目:

Hi I am new to Angular Material and I want to create grid of cards of the form r rows c columns (r X c) dynamically. e.g If I have 5 users then it should create r=3 and c=2 as follows.

user1 user2
user3 user4
user5

I achieved it as follows:

<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>

Is this right approach? Because when I try to resize the windows it will overlap with card and grid cell. I checked on internet but didn't find any clean approach with pure angular material way. Please guide me to achieve the same with better approach than above.

解决方案

Well I had a similar task with creating a list of products to be displayed / filtered dynamically.

First I would suggest to create a new component which is being responsible with displaying the card. 

/* 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>

Then create a card-deck which holds the deck you want to display.

Now in order to be consistent with the number of products you want to show, and also to keep in mind that you might want to have some pagination and also cards to be responsive, you have to display a number of cards which are divided by 2, 3, 4, 6 (12 or 24) - used for cases when the card deck is responsive and you still want to have all rows displayed with cards.

/*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>

Card deck component 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;
}

The main thing here is in CSS. The card deck container has a max-width of 1200px and depending on the width of each card, it will fill up the container with a maximum of 4 cards (4 cards * 300px = 1200px : one row). If the container goes smaller, the card item will go on next row (from the property of fxLayoutWrap).

I am going to post a plunker example soon. Hope this helps till then. p.s. Don't try to understand what those messages from products are saying :)

Plunker example https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview (Use Google Chrome)

The items being displayed can be changed based on the interaction with a possible pagination component. But then you would have to keep all products/items in an array, and you would have another array with the products/items being displayed.

Hope this helps :).

Also don't forget about Angular Flex project:

这篇关于使用 Angular Material 2 动态创建卡片网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆