使用Angular Material 2动态创建网格

Question

您好我是新来的角料,我想创建形式的卡格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的属性).

我很快就会发布一个有关的例子.希望这有助于此.ps不要试图理解产品中的那些消息是什么意思:)

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

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

希望这可以帮助 :).

也不要忘记Angular Flex项目:

• https://github.com/angular/flex-layout/wiki/Responsive-API
• https://github.com/angular/flex-layout/wiki/Declarative-API-Overview
• https://tburleson-layouts-demos.firebaseapp.com/#/responsive

Answer 2

我认为你能负担得起的最优雅的解决方案是将一个mat-card或一个自定义组件mat-card与fxFlexvalue 一起使用在 adiv或任何元素中，fxLayout="row wrap如下所示：

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