Select选择器

下拉选择器。

何时使用

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

单独引入此组件

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

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

代码演示

Select选择器 - 图1

基本使用

基本使用。

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

Select选择器 - 图2

多选

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

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

Select选择器 - 图3

标签

tags select，随意输入的内容（scroll the menu）

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

Select选择器 - 图4

联动

省市联动是典型的例子。

推荐使用 Cascader 组件。

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

Select选择器 - 图5

获得选项的对象

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

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

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

Select选择器 - 图7

隐藏已选择选项

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

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

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

Select选择器 - 图9

带搜索框

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

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

Select选择器 - 图10

三种大小

三种大小的选择框，当 nzSize 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px。

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

Select选择器 - 图11

分组

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

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

Select选择器 - 图12

搜索框

搜索和远程数据结合。

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

Select选择器 - 图13

自动分词

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

  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-automatic-tokenization',
  5.   template: `
  6.     <nz-select
  7.       nzMode="tags"
  8.       [nzTokenSeparators]="[',']"
  9.       style="width: 100%;"
  10.       [(ngModel)]="listOfTagOptions"
  11.       nzPlaceHolder="automatic tokenization"
  12.     >
  13.       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"> </nz-option>
  14.     </nz-select>
  15.   `
  16. })
  17. export class NzDemoSelectAutomaticTokenizationComponent implements OnInit {
  18.   listOfOption: Array<{ label: string; value: string }> = [];
  19.   listOfTagOptions = [];
  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选择器 - 图14

扩展菜单

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

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

Select选择器 - 图15

自定义下拉菜单内容

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

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

Select选择器 - 图16

自定义选择器内容

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

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

API

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

nz-selectcomponent

参数说明类型默认值
[ngModel]当前选中的 nz-option 的 nzValue 值，可双向绑定，当 nzMode 为 multiple 或 tags 时，ngModel 为数组any | any[]-
[compareWith]与 SelectControlValueAccessor 相同(o1: any, o2: any) => boolean(o1: any, o2: any) => o1===o2
[nzAutoClearSearchValue]是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。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()获取焦点