List列表

List列表

通用列表。

何时使用

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

import { NzListModule } from 'ng-zorro-antd/list';

代码演示

简单列表

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

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

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

import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'nz-demo-list-simple',
  template: `
    <h3 [ngStyle]="{ 'margin-bottom.px': 16 }">Default Size</h3>
    <nz-list nzBordered nzHeader="Header" nzFooter="Footer">
      <nz-list-item *ngFor="let item of data">
        <span nz-typography><mark>[ITEM]</mark></span>
        {{ item }}
      </nz-list-item>
    </nz-list>
    <h3 [ngStyle]="{ margin: '16px 0' }">Small Size</h3>
    <nz-list nzBordered nzSize="small">
      <nz-list-header>Header</nz-list-header>
      <nz-list-item *ngFor="let item of data">item</nz-list-item>
      <nz-list-footer>Footer</nz-list-footer>
    </nz-list>
    <h3 [ngStyle]="{ margin: '16px 0' }">Large Size</h3>
    <ul nz-list [nzDataSource]="data" nzBordered nzSize="large">
      <nz-list-header>Header</nz-list-header>
      <li nz-list-item *ngFor="let item of data" nzNoFlex>
        <ul nz-list-item-actions>
          <nz-list-item-action>
            <a (click)="msg.info('edit')">edit</a>
          </nz-list-item-action>
        </ul>
        {{ item }}
      </li>
      <nz-list-footer>Footer</nz-list-footer>
    </ul>
  `
})
export class NzDemoListSimpleComponent {
  data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.'
  ];
  constructor(public msg: NzMessageService) {}
}

基础列表

基础列表。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-list-basic',
  template: `
    <div style="margin-bottom: 8px;"><button nz-button (click)="change()">Switch Data</button></div>
    <nz-list nzItemLayout="horizontal" [nzLoading]="loading">
      <nz-list-item *ngFor="let item of data">
        <nz-list-item-meta
          nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team"
        >
          <nz-list-item-meta-title>
            <a href="https://ng.ant.design">{{ item.title }}</a>
          </nz-list-item-meta-title>
        </nz-list-item-meta>
      </nz-list-item>
      <nz-list-empty *ngIf="data.length === 0"></nz-list-empty>
    </nz-list>
  `
})
export class NzDemoListBasicComponent {
  loading = false;
  data = [
    {
      title: 'Ant Design Title 1'
    },
    {
      title: 'Ant Design Title 2'
    },
    {
      title: 'Ant Design Title 3'
    },
    {
      title: 'Ant Design Title 4'
    }
  ];
  change(): void {
    this.loading = true;
    if (this.data.length > 0) {
      setTimeout(() => {
        this.data = [];
        this.loading = false;
      }, 1000);
    } else {
      setTimeout(() => {
        this.data = [
          {
            title: 'Ant Design Title 1'
          },
          {
            title: 'Ant Design Title 2'
          },
          {
            title: 'Ant Design Title 3'
          },
          {
            title: 'Ant Design Title 4'
          }
        ];
        this.loading = false;
      }, 1000);
    }
  }
}

加载更多

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

// tslint:disable:no-any
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
const count = 5;
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
@Component({
  selector: 'nz-demo-list-loadmore',
  template: `
    <nz-list class="demo-loadmore-list" [nzLoading]="initLoading">
      <nz-list-item *ngFor="let item of list">
        <ng-container *ngIf="!item.loading">
          <nz-list-item-meta
            nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team"
          >
            <nz-list-item-meta-title>
              <a href="https://ng.ant.design">{{ item.name.last }}</a>
            </nz-list-item-meta-title>
          </nz-list-item-meta>
          content
          <ul nz-list-item-actions>
            <nz-list-item-action><a (click)="edit(item)">edit</a></nz-list-item-action>
            <nz-list-item-action><a (click)="edit(item)">more</a></nz-list-item-action>
          </ul>
        </ng-container>
        <nz-skeleton *ngIf="item.loading" [nzAvatar]="true" [nzActive]="true" [nzTitle]="false" [nzLoading]="true"> </nz-skeleton>
      </nz-list-item>
      <div class="loadmore" nz-list-load-more>
        <button nz-button *ngIf="!loadingMore" (click)="onLoadMore()">loading more</button>
      </div>
    </nz-list>
  `,
  styles: [
    `
      .demo-loadmore-list {
        min-height: 350px;
      }
      .loadmore {
        text-align: center;
        margin-top: 12px;
        height: 32px;
        line-height: 32px;
      }
    `
  ]
})
export class NzDemoListLoadmoreComponent implements OnInit {
  initLoading = true; // bug
  loadingMore = false;
  data: any[] = [];
  list: Array<{ loading: boolean; name: any }> = [];
  constructor(private http: HttpClient, private msg: NzMessageService) {}
  ngOnInit(): void {
    this.getData((res: any) => {
      this.data = res.results;
      this.list = res.results;
      this.initLoading = false;
    });
  }
  getData(callback: (res: any) => void): void {
    this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
  }
  onLoadMore(): void {
    this.loadingMore = true;
    this.list = this.data.concat([...Array(count)].fill({}).map(() => ({ loading: true, name: {} })));
    this.http.get(fakeDataUrl).subscribe((res: any) => {
      this.data = this.data.concat(res.results);
      this.list = [...this.data];
      this.loadingMore = false;
    });
  }
  edit(item: any): void {
    this.msg.success(item.email);
  }
}

竖排列表样式

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

import { Component, OnInit } from '@angular/core';
interface ItemData {
  href: string;
  title: string;
  avatar: string;
  description: string;
  content: string;
}
@Component({
  selector: 'nz-demo-list-vertical',
  template: `
    <nz-list nzItemLayout="vertical">
      <nz-list-item *ngFor="let item of data">
        <nz-list-item-meta>
          <nz-list-item-meta-avatar [nzSrc]="item.avatar"> </nz-list-item-meta-avatar>
          <nz-list-item-meta-title>
            <a href="{{ item.href }}">{{ item.title }}</a>
          </nz-list-item-meta-title>
          <nz-list-item-meta-description>
            {{ item.description }}
          </nz-list-item-meta-description>
        </nz-list-item-meta>
        {{ item.content }}
        <ul nz-list-item-actions>
          <nz-list-item-action><i nz-icon nzType="star-o" style="margin-right: 8px;"></i> 156</nz-list-item-action>
          <nz-list-item-action><i nz-icon nzType="star-o" style="margin-right: 8px;"></i> 156</nz-list-item-action>
          <nz-list-item-action><i nz-icon nzType="star-o" style="margin-right: 8px;"></i> 2</nz-list-item-action>
        </ul>
        <nz-list-item-extra>
          <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
        </nz-list-item-extra>
      </nz-list-item>
    </nz-list>
  `
})
export class NzDemoListVerticalComponent implements OnInit {
  data: ItemData[] = [];
  ngOnInit(): void {
    this.loadData(1);
  }
  loadData(pi: number): void {
    this.data = new Array(5).fill({}).map((_, 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.'
      };
    });
  }
}

栅格列表

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-list-grid',
  template: `
    <nz-list nzGrid>
      <div nz-row [nzGutter]="16">
        <div nz-col [nzSpan]="6" *ngFor="let item of data">
          <nz-list-item>
            <nz-card [nzTitle]="item.title">
              Card content
            </nz-card>
          </nz-list-item>
        </div>
      </div>
    </nz-list>
  `
})
export class NzDemoListGridComponent {
  data = [
    {
      title: 'Title 1'
    },
    {
      title: 'Title 2'
    },
    {
      title: 'Title 3'
    },
    {
      title: 'Title 4'
    }
  ];
}

响应式的栅格列表

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-list-resposive',
  template: `
    <nz-list nzGrid>
      <div nz-row [nzGutter]="16">
        <div nz-col [nzXl]="4" [nzLg]="6" [nzMd]="6" [nzSm]="12" [nzXs]="24" *ngFor="let item of data">
          <nz-list-item>
            <nz-card [nzTitle]="item.title">
              Card content
            </nz-card>
          </nz-list-item>
        </div>
      </div>
    </nz-list>
  `
})
export class NzDemoListResposiveComponent {
  data = [
    {
      title: 'Title 1'
    },
    {
      title: 'Title 2'
    },
    {
      title: 'Title 3'
    },
    {
      title: 'Title 4'
    },
    {
      title: 'Title 5'
    },
    {
      title: 'Title 6'
    }
  ];
}

滚动加载无限长列表

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

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

import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { HttpClient } from '@angular/common/http';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
interface ItemData {
  gender: string;
  name: Name;
  email: string;
}
interface Name {
  title: string;
  first: string;
  last: string;
}
@Component({
  selector: 'nz-demo-list-infinite-load',
  template: `
    <div>
      <cdk-virtual-scroll-viewport itemSize="73" class="demo-infinite-container">
        <nz-list>
          <nz-list-item *cdkVirtualFor="let item of ds">
            <nz-skeleton *ngIf="!item" [nzAvatar]="true" [nzParagraph]="{ rows: 1 }"></nz-skeleton>
            <nz-list-item-meta
              *ngIf="item"
              nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              [nzDescription]="item.email"
            >
              <nz-list-item-meta-title>
                <a href="https://ng.ant.design">{{ item.name.last }}</a>
              </nz-list-item-meta-title>
            </nz-list-item-meta>
          </nz-list-item>
        </nz-list>
      </cdk-virtual-scroll-viewport>
    </div>
  `,
  styles: [
    `
      .demo-infinite-container {
        height: 300px;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
      }
      nz-list {
        padding: 24px;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NzDemoListInfiniteLoadComponent {
  ds = new MyDataSource(this.http);
  constructor(private http: HttpClient) {}
}
class MyDataSource extends DataSource<ItemData> {
  private length = 100000;
  private pageSize = 10;
  private cachedData = Array.from<ItemData>({ length: this.length });
  private fetchedPages = new Set<number>();
  private dataStream = new BehaviorSubject<ItemData[]>(this.cachedData);
  private subscription = new Subscription();
  constructor(private http: HttpClient) {
    super();
  }
  connect(collectionViewer: CollectionViewer): Observable<ItemData[]> {
    this.subscription.add(
      collectionViewer.viewChange.subscribe(range => {
        const startPage = this.getPageForIndex(range.start);
        const endPage = this.getPageForIndex(range.end - 1);
        for (let i = startPage; i <= endPage; i++) {
          this.fetchPage(i);
        }
      })
    );
    return this.dataStream;
  }
  disconnect(): void {
    this.subscription.unsubscribe();
  }
  private getPageForIndex(index: number): number {
    return Math.floor(index / this.pageSize);
  }
  private fetchPage(page: number): void {
    if (this.fetchedPages.has(page)) {
      return;
    }
    this.fetchedPages.add(page);
    this.http
      .get<{ results: ItemData[] }>(`https://randomuser.me/api/?results=${this.pageSize}&inc=name,gender,email,nat&noinfo`)
      .subscribe(res => {
        this.cachedData.splice(page * this.pageSize, this.pageSize, ...res.results);
        this.dataStream.next(this.cachedData);
      });
  }
}

API

nz-listcomponent

参数	说明	类型	默认值
`[nzBordered]`	是否展示边框	`boolean`	`false`
`[nzFooter]`	列表底部	`string \| TemplateRef<void>`	-
`[nzHeader]`	列表头部	`string \| TemplateRef<void>`	-
`[nzItemLayout]`	设置 `nz-list-item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排	`‘vertical’ \| ‘horizontal’`	`‘horizontal’`
`[nzLoading]`	当卡片内容还在加载中时，可以用 `loading` 展示一个占位	`boolean`	`false`
`[nzSize]`	list 的尺寸	`‘large’ \| ‘small’ \| ‘default’`	`‘default’`
`[nzSplit]`	是否展示分割线	`boolean`	`true`

nz-list-emptycomponent

列表空内容组件

参数	说明	类型	默认值
`[nzNoResult]`	空内容显示内容	`string \| TemplateRef<void>`	-

nz-list[nzGrid]component

使用栅格布局

nz-list-headercomponent

列表头部位置组件

nz-list-footercomponent

列表脚部位置组件

nz-list-paginationcomponent

列表分页位置组件

nz-list-load-morecomponent

列表加载更多位置组件

nz-list-itemcomponent

参数	说明	类型	默认值
`[nzNoFlex]`	是否非 `flex` 布局渲染	`boolean`	`false`

ul[nz-list-item-actions]

列表项操作项容器组件

nz-list-item-actioncomponent

列表项操作项组件

nz-list-item-extracomponent

列表项扩展内容位置组件

nz-list-item-metacomponent

参数	说明	类型	默认值
`[nzAvatar]`	列表元素的图标	`string \| TemplateRef<void>`	-
`[nzDescription]`	列表元素的描述内容	`string \| TemplateRef<void>`	-
`[nzTitle]`	列表元素的标题	`string \| TemplateRef<void>`	-

nz-list-item-meta-titlecomponent

列表项元信息标题部分组件

nz-list-item-meta-descriptioncomponent

列表项元信息描述部分组件

nz-list-item-meta-avatarcomponent

列表项元信息头像部分组件