使用 Angular Material 2 动态创建卡片网格答案

【问题标题】：Creating Grid of Cards Dynamically using Angular Material 2使用 Angular Material 2 动态创建卡片网格
【发布时间】：2017-07-09 11:37:10
【问题描述】：

您好，我是 Angular Material 的新手，我想动态创建 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>

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

【问题讨论】：

你能分享一下 plunker 吗？
有一个很好的教程here。

标签： angular angular-material2

【解决方案1】：

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

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

/* 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。卡片组容器的最大宽度为 1200 像素，根据每张卡片的宽度，它将用最多 4 张卡片填满容器（4 张卡片 * 300 像素 = 1200 像素：一行）。如果容器变小，卡片项目将继续下一行（来自 fxLayoutWrap 的属性）。

我将很快发布一个 plunker 示例。希望这会有所帮助。 p.s.不要试图理解那些来自产品的信息在说什么:)

Plunker 示例 https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview（使用谷歌浏览器）

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

希望这会有所帮助:)。

也不要忘记 Angular Flex 项目：

【讨论】：

感谢阿德里安的出色回答，它对我很有帮助。

【解决方案2】：

我认为您能负担得起的最优雅的解决方案是将mat-card 或使用mat-card 和fxFlex 值的自定义组件放在div 或任何带有fxLayout="row wrap 的元素中，如下所示：

<div fxLayout="row wrap">
    <mat-card *ngFor="let obj of objects" fxFlex="50">{{obj}}</mat-card>
</div>

【讨论】：