fix(module:list): fix invalid render empty style when unspecified dat…

…a source (#2415) close #2385
NG-ZORRO · Nov 24, 2018 · 7ae325f · 7ae325f
1 parent e6e2369
commit 7ae325f
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 47 deletions.
diff --git a/components/list/demo/vertical.ts b/components/list/demo/vertical.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'nz-demo-list-vertical',
@@ -7,37 +7,50 @@ import { Component } from '@angular/core';
     [nzDataSource]="data"
     [nzItemLayout]="'vertical'"
     [nzRenderItem]="item"
-    [nzPagination]="pagination">
-      <ng-template #item let-item>
-          <nz-list-item [nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="extra">
-              <ng-template #starAction><i nz-icon type="star-o" style="margin-right: 8px;"></i> 156</ng-template>
-              <ng-template #likeAction><i nz-icon type="like-o" style="margin-right: 8px;"></i> 156</ng-template>
-              <ng-template #msgAction><i nz-icon type="message" style="margin-right: 8px;"></i> 2</ng-template>
-              <nz-list-item-meta
-                  [nzAvatar]="item.avatar"
-                  [nzTitle]="nzTitle"
-                  [nzDescription]="item.description">
-                  <ng-template #nzTitle><a href="{{item.href}}">{{item.title}}</a></ng-template>
-              </nz-list-item-meta>
-              <ng-template #extra>
-                  <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png">
-              </ng-template>
-          </nz-list-item>
-      </ng-template>
-      <ng-template #pagination>
-          <nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
-      </ng-template>
+    [nzPagination]="pagination"
+    [nzFooter]="footer">
+    <ng-template #item let-item>
+      <nz-list-item [nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="extra">
+        <ng-template #starAction><i nz-icon type="star-o" style="margin-right: 8px;"></i> 156</ng-template>
+        <ng-template #likeAction><i nz-icon type="like-o" style="margin-right: 8px;"></i> 156</ng-template>
+        <ng-template #msgAction><i nz-icon type="message" style="margin-right: 8px;"></i> 2</ng-template>
+        <nz-list-item-meta
+          [nzAvatar]="item.avatar"
+          [nzTitle]="nzTitle"
+          [nzDescription]="item.description">
+          <ng-template #nzTitle><a href="{{item.href}}">{{item.title}}</a></ng-template>
+        </nz-list-item-meta>
+        <ng-template #extra>
+          <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png">
+        </ng-template>
+      </nz-list-item>
+    </ng-template>
+    <ng-template #footer>
+      <div><b>ant design</b> footer part</div>
+    </ng-template>
+    <ng-template #pagination>
+      <nz-pagination [nzPageIndex]="1" [nzTotal]="50" (nzPageIndexChange)="loadData($event)"></nz-pagination>
+    </ng-template>
   </nz-list>
   `
 })
-export class NzDemoListVerticalComponent {
-  data = new Array(5).fill({}).map((i, index) => {
-    return {
-      href: 'http://ant.design',
-      title: `ant design part ${index}`,
-      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
-      content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
-    };
-  });
+export class NzDemoListVerticalComponent implements OnInit {
+  // tslint:disable-next-line:no-any
+  data: any[] = [];
+
+  ngOnInit(): void {
+    this.loadData(1);
+  }
+
+  loadData(pi: number): void {
+    this.data = new Array(5).fill({}).map((i, index) => {
+      return {
+        href: 'http://ant.design',
+        title: `ant design part ${index} (page: ${pi})`,
+        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+        description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+        content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
+      };
+    });
+  }
 }
diff --git a/components/list/list.spec.ts b/components/list/list.spec.ts
@@ -134,6 +134,12 @@ describe('list', () => {
         fixture.detectChanges();
         expect(dl.queryAll(By.css('.ant-list-empty-text')).length).toBe(1);
       });
+
+      it('should be ingore empty text when unspecified data source', () => {
+        context.data = undefined;
+        fixture.detectChanges();
+        expect(dl.queryAll(By.css('.ant-list-empty-text')).length).toBe(0);
+      });
     });
 
     it('#nzGrid', () => {

diff --git a/components/list/nz-list.component.html b/components/list/nz-list.component.html
@@ -9,24 +9,26 @@
   <ng-container *ngIf="_header; else _headerTpl">{{ _header }}</ng-container>
 </div>
 <nz-spin [nzSpinning]="nzLoading">
-  <div *ngIf="nzLoading && nzDataSource.length === 0" [style.min-height.px]="53"></div>
-  <div *ngIf="nzGrid; else itemsTpl" nz-row [nzGutter]="nzGrid.gutter">
-    <div nz-col [nzSpan]="nzGrid.span" [nzXs]="nzGrid.xs" [nzSm]="nzGrid.sm" [nzMd]="nzGrid.md" [nzLg]="nzGrid.lg" [nzXl]="nzGrid.xl" [nzXXl]="nzGrid.xxl"
-      *ngFor="let item of nzDataSource; let index = index">
-      <ng-template
-        [ngTemplateOutlet]="nzRenderItem"
-        [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-template>
+  <ng-container *ngIf="nzDataSource">
+    <div *ngIf="nzLoading && nzDataSource.length === 0" [style.min-height.px]="53"></div>
+    <div *ngIf="nzGrid; else itemsTpl" nz-row [nzGutter]="nzGrid.gutter">
+      <div nz-col [nzSpan]="nzGrid.span" [nzXs]="nzGrid.xs" [nzSm]="nzGrid.sm" [nzMd]="nzGrid.md" [nzLg]="nzGrid.lg" [nzXl]="nzGrid.xl" [nzXXl]="nzGrid.xxl"
+        *ngFor="let item of nzDataSource; let index = index">
+        <ng-template
+          [ngTemplateOutlet]="nzRenderItem"
+          [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-template>
+      </div>
     </div>
-  </div>
-  <div *ngIf="!nzLoading && nzDataSource.length === 0" class="ant-list-empty-text">
-    {{locale.emptyText}}
-  </div>
+    <div *ngIf="!nzLoading && nzDataSource.length === 0" class="ant-list-empty-text">
+      {{locale.emptyText}}
+    </div>
+  </ng-container>
+  <ng-content></ng-content>
 </nz-spin>
+<div *ngIf="_isFooter" class="ant-list-footer">
+  <ng-container *ngIf="_footer; else _footerTpl">{{ _footer }}</ng-container>
+</div>
 <ng-template [ngTemplateOutlet]="nzLoadMore"></ng-template>
-<ng-content></ng-content>
 <div *ngIf="nzPagination" class="ant-list-pagination">
   <ng-template [ngTemplateOutlet]="nzPagination"></ng-template>
-</div>
-<div *ngIf="_isFooter" class="ant-list-footer">
-  <ng-container *ngIf="_footer; else _footerTpl">{{ _footer }}</ng-container>
 </div>
diff --git a/components/list/nz-list.component.ts b/components/list/nz-list.component.ts
@@ -40,7 +40,7 @@ export class NzListComponent implements OnInit, OnChanges, OnDestroy {
 
   // #region fields
   // tslint:disable-next-line:no-any
-  @Input() nzDataSource: any[] = [];
+  @Input() nzDataSource: any[];
 
   @Input() @InputBoolean() nzBordered = false;