Angular 使用角度材质2动态创建卡片网格

您好，我是角材质新手，我想动态创建

r

行

c

列

（r X c）

形式的卡片网格。e、 g如果我有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>

用户：{{user1.name}
{{user1.details}
喜欢
分享

---

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

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

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

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

这里的主要内容是CSS。卡组容器的最大宽度为1200px，根据每张卡的宽度，它将用最多4张卡填充容器（4张卡*300px=1200px：一行）。 如果容器变小，卡片项目将进入下一行（来自fxLayoutWrap属性）

我将很快发布一个plunker示例。希望在那之前能有所帮助。 p、 不要试图去理解那些来自产品的信息在说什么：）

普朗克例子 （使用谷歌浏览器）

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

希望这有帮助：）

另外，不要忘记Angular Flex项目：

---

我认为您能负担得起的最优雅的解决方案是将

垫卡

或使用

垫卡

和

fxFlex

值的自定义组件放在

div

中，或任何带有

fxLayout=“row wrap

的元素中，如下所示：

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

{{obj}}

你能分享一下plunker吗？这里有一个很好的教程。谢谢Adrian的精彩回答，它对我很有帮助。

.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;
}

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