// 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"
      [nzDataSource]="list"
      [nzItemLayout]="'horizontal'"
      [nzLoading]="initLoading"
      [nzRenderItem]="item"
      [nzLoadMore]="loadMore"
    >
      <ng-template #item let-item>
        <nz-list-item
          [nzContent]="item.loading ? '' : 'content'"
          [nzActions]="item.loading ? [] : [editAction, moreAction]"
        >
          <nz-skeleton [nzAvatar]="true" [nzActive]="true" [nzTitle]="false" [nzLoading]="item.loading">
            <ng-template #editAction><a (click)="edit(item)">edit</a></ng-template>
            <ng-template #moreAction><a (click)="edit(item)">more</a></ng-template>
            <nz-list-item-meta
              [nzTitle]="nzTitle"
              nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team"
            >
              <ng-template #nzTitle>
                <a href="https://ng.ant.design">{{ item.name.last }}</a>
              </ng-template>
            </nz-list-item-meta>
          </nz-skeleton>
        </nz-list-item>
      </ng-template>
      <ng-template #loadMore>
        <div class="loadmore">
          <button nz-button *ngIf="!loadingMore" (click)="onLoadMore()">loading more</button>
        </div>
      </ng-template>
    </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';
@Component({
  selector: 'nz-demo-list-vertical',
  template: `
    <nz-list
      [nzDataSource]="data"
      [nzItemLayout]="'vertical'"
      [nzRenderItem]="item"
      [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 nzType="star-o" style="margin-right: 8px;"></i> 156</ng-template>
          <ng-template #likeAction><i nz-icon nzType="like-o" style="margin-right: 8px;"></i> 156</ng-template>
          <ng-template #msgAction><i nz-icon nzType="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 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((_, 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.'
      };
    });
  }
}

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-list-grid',
  template: `
    <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzGrid]="{ gutter: 16, span: 6 }">
      <ng-template #item let-item>
        <nz-list-item [nzContent]="nzContent">
          <ng-template #nzContent>
            <nz-card [nzTitle]="item.title">
              Card content
            </nz-card>
          </ng-template>
        </nz-list-item>
      </ng-template>
    </nz-list>
  `
})
export class NzDemoListGridComponent {
  data = [
    {
      title: 'Title 1'
    },
    {
      title: 'Title 2'
    },
    {
      title: 'Title 3'
    },
    {
      title: 'Title 4'
    }
  ];
}

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-list-resposive',
  template: `
    <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzGrid]="{ gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
      <ng-template #item let-item>
        <nz-list-item [nzContent]="nzContent">
          <ng-template #nzContent>
            <nz-card [nzTitle]="item.title">
              Card content
            </nz-card>
          </ng-template>
        </nz-list-item>
      </ng-template>
    </nz-list>
  `
})
export class NzDemoListResposiveComponent {
  data = [
    {
      title: 'Title 1'
    },
    {
      title: 'Title 2'
    },
    {
      title: 'Title 3'
    },
    {
      title: 'Title 4'
    },
    {
      title: 'Title 5'
    },
    {
      title: 'Title 6'
    }
  ];
}

// tslint:disable:no-any
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';
@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"
              [nzTitle]="nzTitle"
              nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              [nzDescription]="item.email"
            >
              <ng-template #nzTitle>
                <a href="https://ng.ant.design">{{ item.name.last }}</a>
              </ng-template>
            </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<string | undefined> {
  private length = 100000;
  private pageSize = 10;
  private cachedData = Array.from<any>({ length: this.length });
  private fetchedPages = new Set<number>();
  private dataStream = new BehaviorSubject<any[]>(this.cachedData);
  private subscription = new Subscription();
  constructor(private http: HttpClient) {
    super();
  }
  connect(collectionViewer: CollectionViewer): Observable<any[]> {
    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(`https://randomuser.me/api/?results=${this.pageSize}&inc=name,gender,email,nat&noinfo`)
      .subscribe((res: any) => {
        this.cachedData.splice(page * this.pageSize, this.pageSize, ...res.results);
        this.dataStream.next(this.cachedData);
      });
  }
}