Select选择器

下拉选择器。

何时使用

  • 弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。
  • 当选项少时(少于 5 项),建议直接将选项平铺,使用 Radio 是更好的选择。

单独引入此组件

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

  1. import { NzSelectModule } from 'ng-zorro-antd/select';

代码演示

Select选择器 - 图1

基本使用

基本使用。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-basic',
  4. template: `
  5. <div>
  6. <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
  7. <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
  8. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  9. <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
  10. </nz-select>
  11. <nz-select style="width: 120px;" [ngModel]="'lucy'" nzDisabled>
  12. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  13. </nz-select>
  14. <nz-select style="width: 120px;" [ngModel]="'lucy'" nzLoading>
  15. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  16. </nz-select>
  17. </div>
  18. `,
  19. styles: [
  20. `
  21. nz-select {
  22. margin-right: 8px;
  23. }
  24. `
  25. ]
  26. })
  27. export class NzDemoSelectBasicComponent {
  28. selectedValue = 'lucy';
  29. }

Select选择器 - 图2

多选

多选,从已有条目中选择,例子中通过 nzMaxTagCount 限制最多显示3个选项。

  1. import { Component, OnInit } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-multiple',
  4. template: `
  5. <nz-select
  6. [nzMaxTagCount]="3"
  7. [nzMaxTagPlaceholder]="tagPlaceHolder"
  8. style="width: 100%"
  9. nzMode="multiple"
  10. nzPlaceHolder="Please select"
  11. [(ngModel)]="listOfSelectedValue"
  12. >
  13. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
  14. </nz-select>
  15. <ng-template #tagPlaceHolder let-selectedList> and {{ selectedList.length }} more selected </ng-template>
  16. `
  17. })
  18. export class NzDemoSelectMultipleComponent implements OnInit {
  19. listOfOption: Array<{ label: string; value: string }> = [];
  20. listOfSelectedValue = ['a10', 'c12'];
  21. ngOnInit(): void {
  22. const children: Array<{ label: string; value: string }> = [];
  23. for (let i = 10; i < 36; i++) {
  24. children.push({ label: i.toString(36) + i, value: i.toString(36) + i });
  25. }
  26. this.listOfOption = children;
  27. }
  28. }

Select选择器 - 图3

标签

tags select,随意输入的内容(scroll the menu)

  1. import { Component, OnInit } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-tags',
  4. template: `
  5. <nz-select nzMode="tags" style="width: 100%;" nzPlaceHolder="Tag Mode" [(ngModel)]="listOfTagOptions">
  6. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"> </nz-option>
  7. </nz-select>
  8. `
  9. })
  10. export class NzDemoSelectTagsComponent implements OnInit {
  11. listOfOption: Array<{ label: string; value: string }> = [];
  12. listOfTagOptions = [];
  13. ngOnInit(): void {
  14. const children: Array<{ label: string; value: string }> = [];
  15. for (let i = 10; i < 36; i++) {
  16. children.push({ label: i.toString(36) + i, value: i.toString(36) + i });
  17. }
  18. this.listOfOption = children;
  19. }
  20. }

Select选择器 - 图4

联动

省市联动是典型的例子。

推荐使用 Cascader 组件。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-coordinate',
  4. template: `
  5. <div>
  6. <nz-select style="width: 120px;" [(ngModel)]="selectedProvince" (ngModelChange)="provinceChange($event)">
  7. <nz-option *ngFor="let p of provinceData" [nzValue]="p" [nzLabel]="p"></nz-option>
  8. </nz-select>
  9. <nz-select style="width: 120px;" [(ngModel)]="selectedCity">
  10. <nz-option *ngFor="let c of cityData[selectedProvince]" [nzValue]="c" [nzLabel]="c"></nz-option>
  11. </nz-select>
  12. </div>
  13. `,
  14. styles: [
  15. `
  16. nz-select {
  17. margin-right: 8px;
  18. }
  19. `
  20. ]
  21. })
  22. export class NzDemoSelectCoordinateComponent {
  23. selectedProvince = 'Zhejiang';
  24. selectedCity = 'Hangzhou';
  25. provinceData = ['Zhejiang', 'Jiangsu'];
  26. cityData: { [place: string]: string[] } = {
  27. Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  28. Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']
  29. };
  30. provinceChange(value: string): void {
  31. this.selectedCity = this.cityData[value][0];
  32. }
  33. }

Select选择器 - 图5

获得选项的对象

ngModel 取到的值为选中 nz-optionnzValue 值,当 nzValue 传入为一个对象时,ngModel 获取的值也是一个对象,compareWith 的用法参见 这里.

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-label-in-value',
  4. template: `
  5. <p>The selected option's age is {{ selectedValue?.age }}</p>
  6. <br />
  7. <nz-select
  8. style="width: 120px;"
  9. [compareWith]="compareFn"
  10. [(ngModel)]="selectedValue"
  11. (ngModelChange)="log($event)"
  12. nzAllowClear
  13. nzPlaceHolder="Choose"
  14. >
  15. <nz-option *ngFor="let option of optionList" [nzValue]="option" [nzLabel]="option.label"></nz-option>
  16. </nz-select>
  17. `
  18. })
  19. export class NzDemoSelectLabelInValueComponent {
  20. optionList = [{ label: 'Lucy', value: 'lucy', age: 20 }, { label: 'Jack', value: 'jack', age: 22 }];
  21. selectedValue = { label: 'Jack', value: 'jack', age: 22 };
  22. // tslint:disable-next-line:no-any
  23. compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.value === o2.value : o1 === o2);
  24. log(value: { label: string; value: string; age: number }): void {
  25. console.log(value);
  26. }
  27. }

Select选择器 - 图6

搜索用户

一个带有远程搜索,节流控制,请求时序控制,加载状态的多选示例。

  1. import { HttpClient } from '@angular/common/http';
  2. import { Component, OnInit } from '@angular/core';
  3. import { BehaviorSubject, Observable } from 'rxjs';
  4. import { debounceTime, map, switchMap } from 'rxjs/operators';
  5. @Component({
  6. selector: 'nz-demo-select-select-users',
  7. template: `
  8. <nz-select
  9. style="width: 100%;"
  10. nzMode="multiple"
  11. [(ngModel)]="selectedUser"
  12. nzPlaceHolder="Select users"
  13. nzAllowClear
  14. nzShowSearch
  15. [nzServerSearch]="true"
  16. (nzOnSearch)="onSearch($event)"
  17. >
  18. <ng-container *ngFor="let o of optionList">
  19. <nz-option *ngIf="!isLoading" [nzValue]="o" [nzLabel]="o"></nz-option>
  20. </ng-container>
  21. <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
  22. <i nz-icon nzType="loading" class="loading-icon"></i> Loading Data...
  23. </nz-option>
  24. </nz-select>
  25. `,
  26. styles: [
  27. `
  28. .loading-icon {
  29. margin-right: 8px;
  30. }
  31. `
  32. ]
  33. })
  34. export class NzDemoSelectSelectUsersComponent implements OnInit {
  35. randomUserUrl = 'https://api.randomuser.me/?results=5';
  36. searchChange$ = new BehaviorSubject('');
  37. optionList: string[] = [];
  38. selectedUser: string;
  39. isLoading = false;
  40. onSearch(value: string): void {
  41. this.isLoading = true;
  42. this.searchChange$.next(value);
  43. }
  44. constructor(private http: HttpClient) {}
  45. ngOnInit(): void {
  46. // tslint:disable-next-line:no-any
  47. const getRandomNameList = (name: string) =>
  48. this.http
  49. .get(`${this.randomUserUrl}`)
  50. .pipe(map((res: any) => res.results))
  51. .pipe(
  52. map((list: any) => {
  53. return list.map((item: any) => `${item.name.first} ${name}`);
  54. })
  55. );
  56. const optionList$: Observable<string[]> = this.searchChange$
  57. .asObservable()
  58. .pipe(debounceTime(500))
  59. .pipe(switchMap(getRandomNameList));
  60. optionList$.subscribe(data => {
  61. this.optionList = data;
  62. this.isLoading = false;
  63. });
  64. }
  65. }

Select选择器 - 图7

隐藏已选择选项

隐藏下拉列表中已选择的选项。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-hide-selected',
  4. template: `
  5. <nz-select
  6. style="width: 100%"
  7. nzMode="multiple"
  8. nzPlaceHolder="Inserted are removed"
  9. [(ngModel)]="listOfSelectedValue"
  10. >
  11. <ng-container *ngFor="let option of listOfOption">
  12. <nz-option [nzLabel]="option" [nzValue]="option" *ngIf="isNotSelected(option)"></nz-option>
  13. </ng-container>
  14. </nz-select>
  15. `
  16. })
  17. export class NzDemoSelectHideSelectedComponent {
  18. listOfOption = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
  19. listOfSelectedValue: string[] = [];
  20. isNotSelected(value: string): boolean {
  21. return this.listOfSelectedValue.indexOf(value) === -1;
  22. }
  23. }

Select选择器 - 图8

下拉加载

一个带有下拉加载远程数据的例子。

  1. import { HttpClient } from '@angular/common/http';
  2. import { Component, OnInit } from '@angular/core';
  3. import { Observable } from 'rxjs';
  4. import { map } from 'rxjs/operators';
  5. @Component({
  6. selector: 'nz-demo-select-scroll-load',
  7. template: `
  8. <nz-select
  9. style="width: 100%;"
  10. [(ngModel)]="selectedUser"
  11. (nzScrollToBottom)="loadMore()"
  12. nzPlaceHolder="Select users"
  13. nzAllowClear
  14. >
  15. <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o"></nz-option>
  16. <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
  17. <i nz-icon nzType="loading" class="loading-icon"></i> Loading Data...
  18. </nz-option>
  19. </nz-select>
  20. `,
  21. styles: [
  22. `
  23. .loading-icon {
  24. margin-right: 8px;
  25. }
  26. `
  27. ]
  28. })
  29. export class NzDemoSelectScrollLoadComponent implements OnInit {
  30. randomUserUrl = 'https://api.randomuser.me/?results=10';
  31. optionList: string[] = [];
  32. selectedUser = null;
  33. isLoading = false;
  34. // tslint:disable:no-any
  35. getRandomNameList: Observable<string[]> = this.http
  36. .get(`${this.randomUserUrl}`)
  37. .pipe(map((res: any) => res.results))
  38. .pipe(
  39. map((list: any) => {
  40. return list.map((item: any) => `${item.name.first}`);
  41. })
  42. );
  43. // tslint:enable:no-any
  44. loadMore(): void {
  45. this.isLoading = true;
  46. this.getRandomNameList.subscribe(data => {
  47. this.isLoading = false;
  48. this.optionList = [...this.optionList, ...data];
  49. });
  50. }
  51. constructor(private http: HttpClient) {}
  52. ngOnInit(): void {
  53. this.loadMore();
  54. }
  55. }

Select选择器 - 图9

带搜索框

展开后可对选项进行搜索。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-search',
  4. template: `
  5. <nz-select
  6. style="width: 200px;"
  7. nzShowSearch
  8. nzAllowClear
  9. nzPlaceHolder="Select a person"
  10. [(ngModel)]="selectedValue"
  11. >
  12. <nz-option nzLabel="Jack" nzValue="jack"></nz-option>
  13. <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
  14. <nz-option nzLabel="Tom" nzValue="tom"></nz-option>
  15. </nz-select>
  16. `
  17. })
  18. export class NzDemoSelectSearchComponent {
  19. selectedValue = null;
  20. }

Select选择器 - 图10

三种大小

三种大小的选择框,当 nzSize 分别为 largesmall 时,输入框高度为 40px24px ,默认高度为 32px

  1. import { Component, OnInit } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-size',
  4. template: `
  5. <nz-radio-group [(ngModel)]="size">
  6. <label nz-radio-button nzValue="large"><span>Large</span></label>
  7. <label nz-radio-button nzValue="default"><span>Default</span></label>
  8. <label nz-radio-button nzValue="small"><span>Small</span></label>
  9. </nz-radio-group>
  10. <br /><br />
  11. <nz-select style="width: 200px;" [(ngModel)]="singleValue" [nzSize]="size">
  12. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
  13. </nz-select>
  14. <br /><br />
  15. <nz-select style="width: 200px;" [(ngModel)]="singleValue" [nzSize]="size" nzShowSearch>
  16. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
  17. </nz-select>
  18. <br /><br />
  19. <nz-select
  20. style="width: 100%"
  21. [(ngModel)]="multipleValue"
  22. [nzSize]="size"
  23. nzMode="multiple"
  24. nzPlaceHolder="Please select"
  25. >
  26. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
  27. </nz-select>
  28. <br /><br />
  29. <nz-select style="width: 100%" [(ngModel)]="tagValue" [nzSize]="size" nzMode="tags" nzPlaceHolder="Please select">
  30. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
  31. </nz-select>
  32. `
  33. })
  34. export class NzDemoSelectSizeComponent implements OnInit {
  35. listOfOption: Array<{ label: string; value: string }> = [];
  36. size = 'default';
  37. singleValue = 'a10';
  38. multipleValue = ['a10', 'c12'];
  39. tagValue = ['a10', 'c12', 'tag'];
  40. ngOnInit(): void {
  41. const children: Array<{ label: string; value: string }> = [];
  42. for (let i = 10; i < 36; i++) {
  43. children.push({ label: i.toString(36) + i, value: i.toString(36) + i });
  44. }
  45. this.listOfOption = children;
  46. }
  47. }

Select选择器 - 图11

分组

nz-option-group 进行选项分组。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-optgroup',
  4. template: `
  5. <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
  6. <nz-option-group nzLabel="Manager">
  7. <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
  8. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  9. </nz-option-group>
  10. <nz-option-group nzLabel="Engineer">
  11. <nz-option nzValue="Tom" nzLabel="tom"></nz-option>
  12. </nz-option-group>
  13. </nz-select>
  14. `
  15. })
  16. export class NzDemoSelectOptgroupComponent {
  17. selectedValue = 'lucy';
  18. }

Select选择器 - 图12

搜索框

搜索和远程数据结合。

  1. import { HttpClient } from '@angular/common/http';
  2. import { Component } from '@angular/core';
  3. @Component({
  4. selector: 'nz-demo-select-search-box',
  5. template: `
  6. <nz-select
  7. style="width: 200px;"
  8. nzShowSearch
  9. nzServerSearch
  10. nzPlaceHolder="input search text"
  11. [nzShowArrow]="false"
  12. [nzFilterOption]="nzFilterOption"
  13. [(ngModel)]="selectedValue"
  14. (nzOnSearch)="search($event)"
  15. >
  16. <nz-option *ngFor="let o of listOfOption" [nzLabel]="o.text" [nzValue]="o.value"> </nz-option>
  17. </nz-select>
  18. `
  19. })
  20. export class NzDemoSelectSearchBoxComponent {
  21. selectedValue = null;
  22. listOfOption: Array<{ value: string; text: string }> = [];
  23. nzFilterOption = () => true;
  24. constructor(private httpClient: HttpClient) {}
  25. search(value: string): void {
  26. this.httpClient
  27. .jsonp<{ result: Array<[string, string]> }>(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, 'callback')
  28. .subscribe(data => {
  29. const listOfOption: Array<{ value: string; text: string }> = [];
  30. data.result.forEach(item => {
  31. listOfOption.push({
  32. value: item[0],
  33. text: item[0]
  34. });
  35. });
  36. this.listOfOption = listOfOption;
  37. });
  38. }
  39. }

Select选择器 - 图13

自动分词

试下复制 露西,杰克 到输入框里。只在 tags 和 multiple 模式下可用。

  1. import { Component, OnInit } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-automatic-tokenization',
  4. template: `
  5. <nz-select
  6. nzMode="tags"
  7. [nzTokenSeparators]="[',']"
  8. style="width: 100%;"
  9. [(ngModel)]="listOfTagOptions"
  10. nzPlaceHolder="automatic tokenization"
  11. >
  12. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"> </nz-option>
  13. </nz-select>
  14. `
  15. })
  16. export class NzDemoSelectAutomaticTokenizationComponent implements OnInit {
  17. listOfOption: Array<{ label: string; value: string }> = [];
  18. listOfTagOptions = [];
  19. ngOnInit(): void {
  20. const children: Array<{ label: string; value: string }> = [];
  21. for (let i = 10; i < 36; i++) {
  22. children.push({ label: i.toString(36) + i, value: i.toString(36) + i });
  23. }
  24. this.listOfOption = children;
  25. }
  26. }

Select选择器 - 图14

扩展菜单

使用 nzDropdownRender 对下拉菜单进行自由扩展。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-custom-dropdown-menu',
  4. template: `
  5. <nz-select style="width: 120px;" nzShowSearch nzAllowClear [ngModel]="'lucy'" [nzDropdownRender]="render">
  6. <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
  7. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  8. </nz-select>
  9. <ng-template #render>
  10. <nz-divider style="margin: 4px 0;"></nz-divider>
  11. <div style="padding: 8px; cursor: pointer"><i nz-icon nzType="plus"></i> Add item</div>
  12. </ng-template>
  13. `
  14. })
  15. export class NzDemoSelectCustomDropdownMenuComponent {}

Select选择器 - 图15

自定义下拉菜单内容

通过 nzCustomContent 自定义 nz-option 显示的内容。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-custom-content',
  4. template: `
  5. <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="Select OS" [(ngModel)]="selectedOS">
  6. <nz-option nzCustomContent nzLabel="Windows" nzValue="windows"
  7. ><i nz-icon nzType="windows"></i> Windows</nz-option
  8. >
  9. <nz-option nzCustomContent nzLabel="Mac" nzValue="mac"><i nz-icon nzType="apple"></i> Mac</nz-option>
  10. <nz-option nzCustomContent nzLabel="Android" nzValue="android"
  11. ><i nz-icon nzType="android"></i> Android</nz-option
  12. >
  13. </nz-select>
  14. `
  15. })
  16. export class NzDemoSelectCustomContentComponent {
  17. selectedOS = null;
  18. }

Select选择器 - 图16

自定义选择器内容

通过 nzCustomTemplate 自定义 nz-select 显示的内容。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-custom-template',
  4. template: `
  5. <nz-select
  6. style="width: 200px;"
  7. nzAllowClear
  8. nzPlaceHolder="Select OS"
  9. [(ngModel)]="selectedOS"
  10. [nzCustomTemplate]="custom"
  11. >
  12. <nz-option nzCustomContent nzLabel="Windows" nzValue="windows"
  13. ><i nz-icon nzType="windows"></i> Windows</nz-option
  14. >
  15. <nz-option nzCustomContent nzLabel="Mac" nzValue="mac"><i nz-icon nzType="apple"></i> Mac</nz-option>
  16. <nz-option nzCustomContent nzLabel="Android" nzValue="android"
  17. ><i nz-icon nzType="android"></i> Android</nz-option
  18. >
  19. </nz-select>
  20. <ng-template #custom let-selected>
  21. <span>Label: {{ selected.nzLabel }} Value: {{ selected.nzValue }}</span>
  22. </ng-template>
  23. `
  24. })
  25. export class NzDemoSelectCustomTemplateComponent {
  26. selectedOS = null;
  27. }

API

  1. <nz-select>
  2. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  3. </nz-select>

nz-selectcomponent

参数说明类型默认值
[ngModel]当前选中的 nz-option 的 nzValue 值,可双向绑定,当 nzModemultipletags 时,ngModel 为数组any | any[]-
[compareWith]SelectControlValueAccessor 相同(o1: any, o2: any) => boolean(o1: any, o2: any) => o1===o2
[nzAutoClearSearchValue]是否在选中项后清空搜索框,只在 modemultipletags 时有效。booleantrue
[nzAllowClear]支持清除booleanfalse
[nzOpen]下拉菜单是否打开,可双向绑定booleanfalse
[nzAutoFocus]默认获取焦点booleanfalse
[nzDisabled]是否禁用booleanfalse
[nzDropdownClassName]下拉菜单的 className 属性string-
[nzDropdownMatchSelectWidth]下拉菜单和选择器同宽booleantrue
[nzDropdownStyle]下拉菜单的 style 属性object-
[nzCustomTemplate]自定义选择框的Template内容TemplateRef<{ $implicit: NzOptionComponent }>-
[nzServerSearch]是否使用服务端搜索,当为 true 时,将不再在前端对 nz-option 进行过滤booleanfalse
[nzFilterOption]是否根据输入项进行筛选。当其为一个函数时,会接收 inputValueoption 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false(input?: string, option?: NzOptionComponent) => boolean;-
[nzMaxMultipleCount]最多选中多少个标签numberInfinity
[nzMode]设置 nz-select 的模式'multiple' | 'tags' | 'default''default'
[nzNotFoundContent]当下拉列表为空时显示的内容string | TemplateRef<void>-
[nzPlaceHolder]选择框默认文字string-
[nzShowArrow]是否显示下拉小箭头booleantrue
[nzShowSearch]使单选模式可搜索booleanfalse
[nzSize]选择框大小'large' | 'small' | 'default''default'
[nzSuffixIcon]自定义的选择框后缀图标TemplateRef<void>-
[nzRemoveIcon]自定义的多选框清除图标TemplateRef<void>-
[nzClearIcon]自定义的多选框清空图标TemplateRef<void>-
[nzMenuItemSelectedIcon]自定义当前选中的条目图标TemplateRef<void>-
[nzTokenSeparators]在 tags 和 multiple 模式下自动分词的分隔符string[][]
[nzLoading]加载中状态booleanfalse
[nzMaxTagCount]最多显示多少个 tagnumber-
[nzMaxTagPlaceholder]隐藏 tag 时显示的内容TemplateRef<{ $implicit: any[] }>-
(ngModelChange)选中的 nz-option 发生变化时,调用此函数EventEmitter<any[]>-
(nzOpenChange)下拉菜单打开状态变化回调EventEmitter<boolean>-
(nzScrollToBottom)下拉列表滚动到底部的回调EventEmitter<void>-
(nzOnSearch)文本框值变化时回调EventEmitter<string>-
(nzFocus)focus时回调EventEmitter<void>-
(nzBlur)blur时回调EventEmitter<void>-

nz-optioncomponent

参数说明类型默认值
[nzDisabled]是否禁用booleanfalse
[nzLabel]选中该 nz-option 后,nz-select 中显示的文字string-
[nzValue]nz-select 中 ngModel 的值any-
[nzCustomContent]是否自定义在下拉菜单中的Template内容,当为 true 时,nz-option 包裹的内容将直接渲染在下拉菜单中booleanfalse

nz-option-groupcomponent

参数说明类型默认值
[nzLabel]组名string | TemplateRef<void>-

方法

nz-selectcomponent

名称说明
blur()取消焦点
focus()获取焦点