• Select选择器
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-selectcomponent
      • nz-optioncomponent
      • nz-option-groupcomponent
    • 方法
      • nz-selectcomponent

    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()获取焦点