Empty空状态

空状态时的展示占位图。

何时使用#

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

单独引入此组件#

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

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

代码演示

empty

暂无数据

简单的展示。

expand codeexpand code
import { Component } from '@angular/core';

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

Customize Description

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-empty-customize',
  template: `
    <nz-empty
      [nzNotFoundImage]="
        'https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original'
      "
      [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');
  }
}

Select

TreeSelect

Cascader

Transfer

0 项
empty

暂无数据

0 项
empty

暂无数据

Table

Title
Age
empty

暂无数据

List

empty

暂无数据

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

expand codeexpand code
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NzEmptyService } from 'ng-zorro-antd';

@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>
      <thead>
        <tr>
          <th>Title</th>
          <th>Age</th>
        </tr>
      </thead>
    </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 nzEmptyService: NzEmptyService) {}

  onConfigChange(): void {
    if (this.customize) {
      this.nzEmptyService.setDefaultContent(this.customTpl); // tslint:disable-line:no-any
    } else {
      this.nzEmptyService.resetDefault();
    }
  }
}

API#

nz-empty#

参数说明类型默认值
[nzNotFoundImage]设置显示图片,为 string 时表示自定义图片地址string | TemplateRef<void>-
[nzNotFoundContent]自定义描述内容string | TemplateRef<void>-
[nzNotFoundFooter]设置自定义 footerstring | TemplateRef<void>-

NzEmptyService#

属性/方法说明参数
setDefaultEmptyContent设置全局空内容,空组件的父组件名称将会被传递给模板TemplateRef<string> | string
resetDefault重置默认空内容-

InjectionToken#

Token说明参数
NZ_DEFAULT_EMPTY_CONTENT提供一个用户自定义的空组件Component | string
NZ_EMPTY_COMPONENT_NAME将会被注入到 NZ_DEFAULT_EMPTY_CONTENT 中,告诉该组件其父组件的名称string

全局自定义空组件#

你或许知道或者用过一些类似 nzNotFoundContent 的属性来自定义组件数据为空时的内容,现在它们都会使用 Empty 组件。你甚至可以通过提供在根模块中提供 NZ_DEFAULT_EMPTY_CONTENT,或者是调用 setDefaultEmptyContent 方法来定义一个自定义的全局空组件。