List列表

    最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    列表拥有大、中、小三种尺寸。

    通过设置 为 largesmall 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

    可通过设置 nzHeader 和 nzFooter，来自定义列表头部和尾部。

    1. import { Component } from '@angular/core';
    2. import { NzMessageService } from 'ng-zorro-antd/message';
    4. @Component({
    5.   selector: 'nz-demo-list-simple',
    6.   template: `
    7.     <h3 [ngStyle]="{ 'margin-bottom.px': 16 }">Default Size</h3>
    8.     <nz-list [nzDataSource]="data" nzBordered [nzHeader]="'Header'" [nzFooter]="'Footer'" [nzRenderItem]="defaultItem">
    9.       <ng-template #defaultItem let-item>
    10.         <nz-list-item>
    11.           <span class="ant-typography"><mark>[ITEM]</mark></span>
    12.           {{ item }}
    13.         </nz-list-item>
    14.       </ng-template>
    15.     </nz-list>
    16.     <h3 [ngStyle]="{ margin: '16px 0' }">Small Size</h3>
    17.     <nz-list
    18.       [nzDataSource]="data"
    19.       nzBordered
    20.       nzSize="small"
    21.       [nzHeader]="'Header'"
    22.       [nzFooter]="'Footer'"
    23.       [nzRenderItem]="smallItem"
    24.     >
    25.       <ng-template #smallItem let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
    26.     </nz-list>
    27.     <h3 [ngStyle]="{ margin: '16px 0' }">Large Size</h3>
    28.     <ul
    29.       nz-list
    30.       [nzDataSource]="data"
    31.       nzBordered
    32.       nzSize="large"
    33.       [nzHeader]="'Header'"
    34.       [nzFooter]="'Footer'"
    35.       [nzRenderItem]="largeItem"
    36.     >
    37.       <ng-template #largeItem let-item>
    38.         <li nz-list-item [nzActions]="[opAction]" [nzContent]="item" nzNoFlex></li>
    39.         <ng-template #opAction><a (click)="msg.info('edit')">edit</a></ng-template>
    40.       </ng-template>
    41.     </ul>
    42.   `
    43. })
    44. export class NzDemoListSimpleComponent {
    45.   data = [
    46.     'Racing car sprays burning fuel into crowd.',
    47.     'Japanese princess to wed commoner.',
    48.     'Australian walks 100km after outback crash.',
    49.     'Man charged over missing wedding girl.',
    50.     'Los Angeles battles huge wildfires.'
    51.   ];
    53.   constructor(public msg: NzMessageService) {}
    54. }

    List列表 - 图2

    基础列表

    基础列表。

    可通过 loadMore 属性实现加载更多功能。

    1. // tslint:disable:no-any
    2. import { HttpClient } from '@angular/common/http';
    3. import { Component, OnInit } from '@angular/core';
    4. import { NzMessageService } from 'ng-zorro-antd/message';
    6. const count = 5;
    7. const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
    9. @Component({
    10.   selector: 'nz-demo-list-loadmore',
    11.   template: `
    12.     <nz-list
    13.       class="demo-loadmore-list"
    14.       [nzDataSource]="list"
    15.       [nzItemLayout]="'horizontal'"
    16.       [nzLoading]="initLoading"
    17.       [nzRenderItem]="item"
    18.       [nzLoadMore]="loadMore"
    19.     >
    20.       <ng-template #item let-item>
    21.         <nz-list-item
    22.           [nzContent]="item.loading ? '' : 'content'"
    23.           [nzActions]="item.loading ? [] : [editAction, moreAction]"
    24.         >
    25.           <nz-skeleton [nzAvatar]="true" [nzActive]="true" [nzTitle]="false" [nzLoading]="item.loading">
    26.             <ng-template #editAction><a (click)="edit(item)">edit</a></ng-template>
    27.             <ng-template #moreAction><a (click)="edit(item)">more</a></ng-template>
    28.             <nz-list-item-meta
    29.               [nzTitle]="nzTitle"
    30.               nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
    31.               nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team"
    32.             >
    33.               <ng-template #nzTitle>
    34.               </ng-template>
    35.             </nz-list-item-meta>
    36.           </nz-skeleton>
    37.         </nz-list-item>
    38.       </ng-template>
    39.       <ng-template #loadMore>
    40.         <div class="loadmore">
    41.           <button nz-button *ngIf="!loadingMore" (click)="onLoadMore()">loading more</button>
    42.         </div>
    43.       </ng-template>
    44.     </nz-list>
    45.   `,
    46.   styles: [
    47.     `
    48.       .demo-loadmore-list {
    49.         min-height: 350px;
    50.       }
    51.       .loadmore {
    52.         text-align: center;
    53.         margin-top: 12px;
    54.         height: 32px;
    55.         line-height: 32px;
    56.       }
    57.     `
    58.   ]
    59. })
    61.   initLoading = true; // bug
    62.   loadingMore = false;
    63.   data: any[] = [];
    64.   list: Array<{ loading: boolean; name: any }> = [];
    66.   constructor(private http: HttpClient, private msg: NzMessageService) {}
    68.   ngOnInit(): void {
    69.     this.getData((res: any) => {
    70.       this.data = res.results;
    71.       this.list = res.results;
    72.       this.initLoading = false;
    73.     });
    74.   }
    76.   getData(callback: (res: any) => void): void {
    77.     this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
    78.   }
    80.   onLoadMore(): void {
    81.     this.loadingMore = true;
    82.     this.list = this.data.concat([...Array(count)].fill({}).map(() => ({ loading: true, name: {} })));
    83.     this.http.get(fakeDataUrl).subscribe((res: any) => {
    84.       this.data = this.data.concat(res.results);
    85.       this.list = [...this.data];
    86.       this.loadingMore = false;
    87.     });
    88.   }
    90.   edit(item: any): void {
    91.     this.msg.success(item.email);
    92.   }
    93. }

    List列表 - 图4

    竖排列表样式

    通过设置 nzItemLayout 属性为 vertical 可实现竖排列表样式。

    可以通过设置 nz-list 的 grid 属性来实现栅格列表，column 可设置期望显示的列数。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-list-grid',
    5.   template: `
    6.     <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzGrid]="{ gutter: 16, span: 6 }">
    7.       <ng-template #item let-item>
    8.         <nz-list-item [nzContent]="nzContent">
    9.           <ng-template #nzContent>
    10.             <nz-card [nzTitle]="item.title">
    11.               Card content
    12.             </nz-card>
    13.           </ng-template>
    14.         </nz-list-item>
    15.       </ng-template>
    16.     </nz-list>
    17.   `
    18. })
    19. export class NzDemoListGridComponent {
    20.   data = [
    21.     {
    22.       title: 'Title 1'
    23.     },
    24.     {
    25.       title: 'Title 2'
    26.     },
    27.     {
    28.       title: 'Title 3'
    29.     },
    30.     {
    31.       title: 'Title 4'
    32.     }
    33.   ];
    34. }

    List列表 - 图6

    响应式的栅格列表。尺寸与 Layout Grid 保持一致。

    结合 cdk-virtual-scroll 实现滚动加载无限长列表，带有虚拟化 virtualization 功能，能够提高数据量大时候长列表的性能。

    Virtualized 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。

    1. // tslint:disable:no-any
    2. import { HttpClient } from '@angular/common/http';
    3. import { ChangeDetectionStrategy, Component } from '@angular/core';
    4. import { BehaviorSubject, Observable, Subscription } from 'rxjs';
    6. @Component({
    7.   selector: 'nz-demo-list-infinite-load',
    8.   template: `
    9.     <div>
    10.       <cdk-virtual-scroll-viewport itemSize="73" class="demo-infinite-container">
    11.         <nz-list>
    12.           <nz-list-item *cdkVirtualFor="let item of ds">
    13.             <nz-skeleton *ngIf="!item" [nzAvatar]="true" [nzParagraph]="{ rows: 1 }"></nz-skeleton>
    14.             <nz-list-item-meta
    15.               *ngIf="item"
    16.               [nzTitle]="nzTitle"
    17.               nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
    18.               [nzDescription]="item.email"
    19.             >
    20.               <ng-template #nzTitle>
    21.                 <a href="https://ng.ant.design">{{ item.name.last }}</a>
    22.               </ng-template>
    23.             </nz-list-item-meta>
    24.           </nz-list-item>
    25.         </nz-list>
    26.       </cdk-virtual-scroll-viewport>
    27.     </div>
    28.   `,
    29.   styles: [
    30.     `
    31.       .demo-infinite-container {
    32.         height: 300px;
    33.         border: 1px solid #e8e8e8;
    34.         border-radius: 4px;
    35.       }
    37.       nz-list {
    38.         padding: 24px;
    39.       }
    40.     `
    41.   ],
    42.   changeDetection: ChangeDetectionStrategy.OnPush
    43. })
    44. export class NzDemoListInfiniteLoadComponent {
    45.   ds = new MyDataSource(this.http);
    48. }
    50. class MyDataSource extends DataSource<string | undefined> {
    51.   private length = 100000;
    52.   private pageSize = 10;
    53.   private cachedData = Array.from<any>({ length: this.length });
    54.   private fetchedPages = new Set<number>();
    55.   private dataStream = new BehaviorSubject<any[]>(this.cachedData);
    56.   private subscription = new Subscription();
    58.   constructor(private http: HttpClient) {
    59.     super();
    60.   }
    62.   connect(collectionViewer: CollectionViewer): Observable<any[]> {
    63.     this.subscription.add(
    64.       collectionViewer.viewChange.subscribe(range => {
    65.         const startPage = this.getPageForIndex(range.start);
    66.         const endPage = this.getPageForIndex(range.end - 1);
    67.         for (let i = startPage; i <= endPage; i++) {
    68.           this.fetchPage(i);
    69.         }
    70.       })
    71.     );
    72.     return this.dataStream;
    73.   }
    75.   disconnect(): void {
    76.     this.subscription.unsubscribe();
    77.   }
    79.   private getPageForIndex(index: number): number {
    80.     return Math.floor(index / this.pageSize);
    81.   }
    83.   private fetchPage(page: number): void {
    84.     if (this.fetchedPages.has(page)) {
    85.       return;
    86.     }
    87.     this.fetchedPages.add(page);
    89.     this.http
    90.       .get(`https://randomuser.me/api/?results=${this.pageSize}&inc=name,gender,email,nat&noinfo`)
    91.       .subscribe((res: any) => {
    92.         this.cachedData.splice(page * this.pageSize, this.pageSize, ...res.results);
    93.         this.dataStream.next(this.cachedData);
    94.       });
    95.   }
    96. }

    nzGrid