Empty空状态

当目前没有数据时，用于显式的用户提示。

基本

简单的展示。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-empty-basic',
  template: `
    <nz-empty></nz-empty>
  `
})

可以通过设置 nzNotFoundImage 为 simple 选择另一种风格的图片。

自定义

自定义图片、描述、附属内容。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-empty-customize',
  template: `
    <nz-empty
      nzNotFoundImage="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
      [nzNotFoundContent]="contentTpl"
      [nzNotFoundFooter]="footerTpl"
      <ng-template #contentTpl>
        <span> Customize <a href="#API">Description</a> </span>
      </ng-template>
      <ng-template #footerTpl>
        <button nz-button nzType="primary" (click)="onClick()">Create Now</button>
    </nz-empty>
  `
})
export class NzDemoEmptyCustomizeComponent {
  onClick(): void {
    console.log('clicked');
  }
}

自定义全局组件的 Empty 样式。

无描述

无描述展示。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-empty-description',
  template: `
    <nz-empty [nzNotFoundContent]="null"></nz-empty>
export class NzDemoEmptyDescriptionComponent {}

nzEmpty 接口有如下字段：