Skip to content

Commit 7ae325f

Browse files
cipchkvthinkxie
cipchk
authored and
vthinkxie
committed
fix(module:list): fix invalid render empty style when unspecified data source (#2415)
close #2385
1 parent e6e2369 commit 7ae325f

File tree

4 files changed

+68
-47
lines changed

4 files changed

+68
-47
lines changed

Diff for: ‎components/list/demo/vertical.ts

+44-31
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22

33
@Component({
44
selector: 'nz-demo-list-vertical',
@@ -7,37 +7,50 @@ import { Component } from '@angular/core';
77
[nzDataSource]="data"
88
[nzItemLayout]="'vertical'"
99
[nzRenderItem]="item"
10-
[nzPagination]="pagination">
11-
<ng-template #item let-item>
12-
<nz-list-item [nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="extra">
13-
<ng-template #starAction><i nz-icon type="star-o" style="margin-right: 8px;"></i> 156</ng-template>
14-
<ng-template #likeAction><i nz-icon type="like-o" style="margin-right: 8px;"></i> 156</ng-template>
15-
<ng-template #msgAction><i nz-icon type="message" style="margin-right: 8px;"></i> 2</ng-template>
16-
<nz-list-item-meta
17-
[nzAvatar]="item.avatar"
18-
[nzTitle]="nzTitle"
19-
[nzDescription]="item.description">
20-
<ng-template #nzTitle><a href="{{item.href}}">{{item.title}}</a></ng-template>
21-
</nz-list-item-meta>
22-
<ng-template #extra>
23-
<img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png">
24-
</ng-template>
25-
</nz-list-item>
26-
</ng-template>
27-
<ng-template #pagination>
28-
<nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
29-
</ng-template>
10+
[nzPagination]="pagination"
11+
[nzFooter]="footer">
12+
<ng-template #item let-item>
13+
<nz-list-item [nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="extra">
14+
<ng-template #starAction><i nz-icon type="star-o" style="margin-right: 8px;"></i> 156</ng-template>
15+
<ng-template #likeAction><i nz-icon type="like-o" style="margin-right: 8px;"></i> 156</ng-template>
16+
<ng-template #msgAction><i nz-icon type="message" style="margin-right: 8px;"></i> 2</ng-template>
17+
<nz-list-item-meta
18+
[nzAvatar]="item.avatar"
19+
[nzTitle]="nzTitle"
20+
[nzDescription]="item.description">
21+
<ng-template #nzTitle><a href="{{item.href}}">{{item.title}}</a></ng-template>
22+
</nz-list-item-meta>
23+
<ng-template #extra>
24+
<img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png">
25+
</ng-template>
26+
</nz-list-item>
27+
</ng-template>
28+
<ng-template #footer>
29+
<div><b>ant design</b> footer part</div>
30+
</ng-template>
31+
<ng-template #pagination>
32+
<nz-pagination [nzPageIndex]="1" [nzTotal]="50" (nzPageIndexChange)="loadData($event)"></nz-pagination>
33+
</ng-template>
3034
</nz-list>
3135
`
3236
})
33-
export class NzDemoListVerticalComponent {
34-
data = new Array(5).fill({}).map((i, index) => {
35-
return {
36-
href: 'http://ant.design',
37-
title: `ant design part ${index}`,
38-
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
39-
description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
40-
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.'
41-
};
42-
});
37+
export class NzDemoListVerticalComponent implements OnInit {
38+
// tslint:disable-next-line:no-any
39+
data: any[] = [];
40+
41+
ngOnInit(): void {
42+
this.loadData(1);
43+
}
44+
45+
loadData(pi: number): void {
46+
this.data = new Array(5).fill({}).map((i, index) => {
47+
return {
48+
href: 'http://ant.design',
49+
title: `ant design part ${index} (page: ${pi})`,
50+
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
51+
description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
52+
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.'
53+
};
54+
});
55+
}
4356
}

Diff for: ‎components/list/list.spec.ts

+6
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,12 @@ describe('list', () => {
134134
fixture.detectChanges();
135135
expect(dl.queryAll(By.css('.ant-list-empty-text')).length).toBe(1);
136136
});
137+
138+
it('should be ingore empty text when unspecified data source', () => {
139+
context.data = undefined;
140+
fixture.detectChanges();
141+
expect(dl.queryAll(By.css('.ant-list-empty-text')).length).toBe(0);
142+
});
137143
});
138144

139145
it('#nzGrid', () => {

Diff for: ‎components/list/nz-list.component.html

+17-15
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,26 @@
99
<ng-container *ngIf="_header; else _headerTpl">{{ _header }}</ng-container>
1010
</div>
1111
<nz-spin [nzSpinning]="nzLoading">
12-
<div *ngIf="nzLoading && nzDataSource.length === 0" [style.min-height.px]="53"></div>
13-
<div *ngIf="nzGrid; else itemsTpl" nz-row [nzGutter]="nzGrid.gutter">
14-
<div nz-col [nzSpan]="nzGrid.span" [nzXs]="nzGrid.xs" [nzSm]="nzGrid.sm" [nzMd]="nzGrid.md" [nzLg]="nzGrid.lg" [nzXl]="nzGrid.xl" [nzXXl]="nzGrid.xxl"
15-
*ngFor="let item of nzDataSource; let index = index">
16-
<ng-template
17-
[ngTemplateOutlet]="nzRenderItem"
18-
[ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-template>
12+
<ng-container *ngIf="nzDataSource">
13+
<div *ngIf="nzLoading && nzDataSource.length === 0" [style.min-height.px]="53"></div>
14+
<div *ngIf="nzGrid; else itemsTpl" nz-row [nzGutter]="nzGrid.gutter">
15+
<div nz-col [nzSpan]="nzGrid.span" [nzXs]="nzGrid.xs" [nzSm]="nzGrid.sm" [nzMd]="nzGrid.md" [nzLg]="nzGrid.lg" [nzXl]="nzGrid.xl" [nzXXl]="nzGrid.xxl"
16+
*ngFor="let item of nzDataSource; let index = index">
17+
<ng-template
18+
[ngTemplateOutlet]="nzRenderItem"
19+
[ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-template>
20+
</div>
1921
</div>
20-
</div>
21-
<div *ngIf="!nzLoading && nzDataSource.length === 0" class="ant-list-empty-text">
22-
{{locale.emptyText}}
23-
</div>
22+
<div *ngIf="!nzLoading && nzDataSource.length === 0" class="ant-list-empty-text">
23+
{{locale.emptyText}}
24+
</div>
25+
</ng-container>
26+
<ng-content></ng-content>
2427
</nz-spin>
28+
<div *ngIf="_isFooter" class="ant-list-footer">
29+
<ng-container *ngIf="_footer; else _footerTpl">{{ _footer }}</ng-container>
30+
</div>
2531
<ng-template [ngTemplateOutlet]="nzLoadMore"></ng-template>
26-
<ng-content></ng-content>
2732
<div *ngIf="nzPagination" class="ant-list-pagination">
2833
<ng-template [ngTemplateOutlet]="nzPagination"></ng-template>
29-
</div>
30-
<div *ngIf="_isFooter" class="ant-list-footer">
31-
<ng-container *ngIf="_footer; else _footerTpl">{{ _footer }}</ng-container>
3234
</div>

Diff for: ‎components/list/nz-list.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export class NzListComponent implements OnInit, OnChanges, OnDestroy {
4040

4141
// #region fields
4242
// tslint:disable-next-line:no-any
43-
@Input() nzDataSource: any[] = [];
43+
@Input() nzDataSource: any[];
4444

4545
@Input() @InputBoolean() nzBordered = false;
4646

0 commit comments

Comments
 (0)