feat(module: grid): feat support dynamic ng-content in Grid. (#268)

NG-ZORRO · Jan 25, 2019 · 2a579a2 · 2a579a2
1 parent 3fa56dc
commit 2a579a2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/components/grid/demo/basic.ts b/components/grid/demo/basic.ts
@@ -23,6 +23,21 @@ import { Component } from '@angular/core';
     <div class="sub-title">Custom content</div>
     <Grid [data]="data" [columnNum]="3" [itemStyle]="{ height: '150px', background: 'rgba(0,0,0,.05)' }" (OnClick)="click($event)"></Grid>
     <br>
+    <div class="sub-title">ng-content</div>
+    <Grid>
+      <Flex *ngFor="let item of gridData; let i = index" [justify]="'center'" [align]="'stretch'">
+        <FlexItem *ngFor="let subItem of item; let j = index">
+          <div *ngIf="subItem !== null" class="am-grid-item-content" (click)="click(subItem, i * columnNum + j)">
+            <div class="am-grid-item-inner-content column-num-{{ columnNum }}">
+              <img src="{{ subItem.icon }}" class="am-grid-icon" />
+              <div class="am-grid-text">{{ subItem.text }}</div>
+            </div>
+          </div>
+          <div *ngIf="subItem === null" class="am-grid-null-item"></div>
+        </FlexItem>
+      </Flex>
+    </Grid>
+
   `,
   styles: [
     `
@@ -39,6 +54,7 @@ import { Component } from '@angular/core';
   ]
 })
 export class DemoGridBasicComponent {
+  gridData = [];
   data = Array.from(new Array(9)).map((_val, i) => ({
     icon: '/assets/icons/icon-72x72.png',
     text: `name${i}`
@@ -56,4 +72,31 @@ export class DemoGridBasicComponent {
   click(event) {
     console.log(event);
   }
+
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    const dataLength = (this.data && this.data.length) || 0;
+    let rowCount = Math.ceil(dataLength / 3);
+    this.gridData = this.getRows(rowCount, dataLength);
+  }
+
+  getRows(rowCount: number, dataLength: number) {
+    const columnNum = 3;
+    const rowArr = new Array();
+    for (let i = 0; i < rowCount; i++) {
+      rowArr[i] = new Array();
+      for (let j = 0; j < columnNum; j++) {
+        const dataIndex = i * columnNum + j;
+        if (dataIndex < dataLength) {
+          rowArr[i][j] = this.data[dataIndex];
+        } else {
+          rowArr[i][j] = null;
+        }
+      }
+    }
+    return rowArr;
+  }
 }
diff --git a/components/grid/doc/index.en-US.md b/components/grid/doc/index.en-US.md
@@ -21,4 +21,6 @@ Properties | Description | Type | Default
 | isCarousel    |   whether to be played as a Carousel    | boolean  | `false` |
 | carouselMaxRow    |   the max number of rows to be showed each page of the Carousel   | number  | `2` |
 | square  |   whether each item restrict to a square   | boolean | true |
-| itemStyle| Custom GridCell Style| object|{} |
+| itemStyle| Custom GridCell Style| object|{} |
+
+> **注：** support dynamic ng-content in Grid.
diff --git a/components/grid/doc/index.zh-CN.md b/components/grid/doc/index.zh-CN.md
@@ -22,4 +22,6 @@ subtitle: 宫格
 | isCarousel    |   是否跑马灯,     | boolean  | `false` |
 | carouselMaxRow    |   如果是跑马灯, 一页跑马灯需要展示的行数   | number  | `2` |
 | square   |   每个格子是否固定为正方形   | boolean | true |
-| itemStyle| 每个格子自定义样式| object|{} |
+| itemStyle| 每个格子自定义样式| object|{} |
+
+> **注：** Grid 支持ng-content.
diff --git a/components/grid/grid.component.html b/components/grid/grid.component.html
@@ -30,8 +30,8 @@
       </div>
       <div *ngIf="subItem === null" class="{{defaultProps.prefixCls}}-null-item"></div>
     </FlexItem>
-    <ng-content></ng-content>
   </Flex>
+  <ng-content></ng-content>
 </ng-container>
 
 <Carousel *ngIf="isCarousel && carouselDataTmp.length > 0"