Empty空状态

空状态时的展示占位图。

何时使用

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

import { NzEmptyModule } from 'ng-zorro-antd/empty';

代码演示

基本

简单的展示。

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

选择图片

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-empty-simple',
  template: `
    <nz-empty nzNotFoundImage="simple"></nz-empty>
  `
})
export class NzDemoEmptySimpleComponent {}

自定义

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

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>
      </ng-template>
    </nz-empty>
  `
})
export class NzDemoEmptyCustomizeComponent {
  onClick(): void {
    console.log('clicked');
  }
}

全局化配置

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

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NzConfigService } from 'ng-zorro-antd/core/config';
@Component({
  selector: 'nz-demo-empty-config',
  template: `
    <nz-switch
      [nzUnCheckedChildren]="'default'"
      [nzCheckedChildren]="'customize'"
      [(ngModel)]="customize"
      (ngModelChange)="onConfigChange()"
    >
    </nz-switch>
    <nz-divider></nz-divider>
    <h3>Select</h3>
    <nz-select style="width: 200px"></nz-select>
    <h3>TreeSelect</h3>
    <nz-tree-select style="width: 200px;"></nz-tree-select>
    <h3>Cascader</h3>
    <nz-cascader style="width: 200px;" [nzShowSearch]="true" [nzOptions]="[]"></nz-cascader>
    <h3>Transfer</h3>
    <nz-transfer></nz-transfer>
    <h3>Table</h3>
    <nz-table [nzData]="[]">
      <thead>
        <tr>
          <th>Title</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody></tbody>
    </nz-table>
    <h3>List</h3>
    <nz-list [nzDataSource]="[]"></nz-list>
    <ng-template #customTpl let-name>
      <div style="text-align: center;">
        <i nz-icon nzType="smile" style="font-size: 20px;"></i>
        <p>Data Not Found in {{ name }}</p>
      </div>
    </ng-template>
  `,
  styles: [
    `
      h3 {
        font-size: inherit;
        margin: 16px 0 8px 0;
      }
    `
  ]
})
export class NzDemoEmptyConfigComponent {
  @ViewChild('customTpl', { static: false }) customTpl?: TemplateRef<any>; // tslint:disable-line:no-any
  customize = false;
  constructor(private nzConfigService: NzConfigService) {}
  onConfigChange(): void {
    if (this.customize) {
      this.nzConfigService.set('empty', { nzDefaultEmptyContent: this.customTpl });
    } else {
      this.nzConfigService.set('empty', { nzDefaultEmptyContent: undefined });
    }
  }
}

无描述

无描述展示。

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

API

nz-emptycomponent

NZ_CONFIG

nzEmpty 接口有如下字段：

InjectionToken

全局自定义空组件

你或许知道或者用过一些类似 nzNotFoundContent 的属性来自定义组件数据为空时的内容，现在它们都会使用 Empty 组件。你可以通过在 NZ_CONFIG 中提供 { empty: { nzDefaultEmptyContent: something } } 来定义一个自定义的全局空组件。