嗨，我是 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>
这是正确的做法吗？因为当我尝试调整窗口大小时，它会与卡片和网格单元重叠。我在互联网上查了一下，但没有找到任何使用纯 Angular Material 方式的干净方法。请指导我用比上述更好的方法实现同样的目标。
最佳答案
好吧，我有一个类似的任务，即创建要动态显示/过滤的产品列表。
首先，我建议创建一个负责显示卡片的新组件。
/* 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 示例。希望到那时为止这会有所帮助。 附:不要试图理解这些来自产品的消息在说什么:)
Plunker 示例 https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview (使用谷歌浏览器)
显示的项目可以根据与可能的分页组件的交互进行更改。但是你必须将所有产品/项目保存在一个数组中，并且你将拥有另一个显示产品/项目的数组。
希望这对您有所帮助 :)。
也不要忘记 Angular Flex 项目:
关于angular - 使用 Angular Material 2 动态创建卡片网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44995971/