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

Question

您好，我是 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>

这是正确的做法吗？因为当我尝试调整 windows 的大小时，它会与卡片和网格单元格重叠。我在互联网上查过，但没有找到任何纯 angular material 方式的干净方法。请指导我用比上面更好的方法实现同样的目标。

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

然后创建一个 card-deck，其中包含您要显示的牌组。

现在，为了与您要展示的产品数量保持一致，同时请记住，您可能需要一些分页和卡片来响应，您必须展示许多卡片除以 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。卡片组容器的 max-width 为 1200 像素，根据每张卡片的宽度，它会用最多 4 张卡片填满容器（4 张卡片 * 300 像素 = 1200 像素：一行）。如果容器变小，卡片项目将继续在下一行（来自 fxLayoutWrap 的属性）。

我很快就会 post 一个 plunker 的例子。希望到那时为止这会有所帮助。 p.s。不要试图理解那些来自产品的消息在说什么:)

Plunker 示例 https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview（使用GoogleChrome）

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

希望这对您有所帮助 :)。

也不要忘记 Angular Flex 项目：

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

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

Creating Grid of Cards Dynamically using Angular Material 2

angular-material2

angular