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>

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

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>

然后创建一个卡片组，用于存放您想要显示的卡片组。

现在，为了与您想要展示的产品数量保持一致，同时要记住您可能想要一些分页以及响应卡片，您必须显示许多卡片除以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。卡牌集装箱的最大宽度为1200px，根据每张卡的宽度，它将最多填充4个卡（4张卡* 300px = 1200px：一行）。如果容器变小，卡片项将继续下一行（来自fxLayoutWrap的属性）。

我即将发布一个有关的例子。希望这有助于此。附：不要试图理解产品中的那些消息是什么意思:)

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

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

希望这会有所帮助:)。

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

Answer 2

我认为，您可以负担得起的最优雅的解决方案是将mat-card或自定义组件放入mat-card或{ fxFlex像这样：

div

使用Angular Material 2动态创建网格

2 个答案: