Select选择器

下拉选择器。

何时使用

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。
  1. import { NzSelectModule } from 'ng-zorro-antd/select';

代码演示Select选择器 - 图2

Select选择器 - 图3

基本使用

基本使用。

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

Select选择器 - 图4

多选

多选，从已有条目中选择，例子中通过 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.       nzMode="multiple"
  10.       nzPlaceHolder="Please select"
  11.       [(ngModel)]="listOfSelectedValue"
  12.     >
  13.       <nz-option *ngFor="let item of listOfOption" [nzLabel]="item" [nzValue]="item"></nz-option>
  14.     </nz-select>
  15.     <ng-template #tagPlaceHolder let-selectedList> and {{ selectedList.length }} more selected </ng-template>
  16.   `,
  17.   styles: [
  18.     `
  19.       nz-select {
  20.         width: 100%;
  21.       }
  22.     `
  23.   ]
  24. })
  25. export class NzDemoSelectMultipleComponent implements OnInit {
  26.   listOfOption: string[] = [];
  27.   listOfSelectedValue = ['a10', 'c12'];
  29.   ngOnInit(): void {
  30.     const children: string[] = [];
  31.     for (let i = 10; i < 36; i++) {
  32.       children.push(`${i.toString(36)}${i}`);
  33.     }
  34.     this.listOfOption = children;
  35.   }
  36. }

Select选择器 - 图5

标签

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" 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.   styles: [
  11.     `
  12.       nz-select {
  13.         width: 100%;
  14.       }
  15.     `
  16.   ]
  17. })
  18. export class NzDemoSelectTagsComponent implements OnInit {
  19.   listOfOption: Array<{ label: string; value: string }> = [];
  20.   listOfTagOptions = [];
  22.   ngOnInit(): void {
  23.     const children: Array<{ label: string; value: string }> = [];
  24.     for (let i = 10; i < 36; i++) {
  25.       children.push({ label: i.toString(36) + i, value: i.toString(36) + i });
  26.     }
  27.     this.listOfOption = children;
  28.   }
  29. }

Select选择器 - 图6

联动

省市联动是典型的例子。

推荐使用 Cascader 组件。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-coordinate',
  5.   template: `
  6.     <div>
  7.       <nz-select [(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 [(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.         width: 120px;
  20.       }
  21.     `
  22.   ]
  23. })
  24. export class NzDemoSelectCoordinateComponent {
  25.   selectedProvince = 'Zhejiang';
  26.   selectedCity = 'Hangzhou';
  27.   provinceData = ['Zhejiang', 'Jiangsu'];
  28.   cityData: { [place: string]: string[] } = {
  29.     Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  30.     Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']
  31.   };
  33.   provinceChange(value: string): void {
  34.     this.selectedCity = this.cityData[value][0];
  35.   }
  36. }

Select选择器 - 图7

获得选项的对象

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 [(ngModel)]="selectedValue" [compareWith]="compareFn" (ngModelChange)="log($event)" nzAllowClear nzPlaceHolder="Choose">
  9.       <nz-option *ngFor="let option of optionList" [nzValue]="option" [nzLabel]="option.label"></nz-option>
  10.     </nz-select>
  11.   `,
  12.   styles: [
  13.     `
  14.       nz-select {
  15.         width: 120px;
  16.       }
  17.     `
  18.   ]
  19. })
  20. export class NzDemoSelectLabelInValueComponent {
  21.   optionList = [
  22.     { label: 'Lucy', value: 'lucy', age: 20 },
  23.     { label: 'Jack', value: 'jack', age: 22 }
  24.   ];
  25.   selectedValue = { label: 'Jack', value: 'jack', age: 22 };
  26.   // tslint:disable-next-line:no-any
  27.   compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.value === o2.value : o1 === o2);
  29.   log(value: { label: string; value: string; age: number }): void {
  30.     console.log(value);
  31.   }
  32. }

Select选择器 - 图8

搜索用户

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

  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.       nzMode="multiple"
  11.       nzPlaceHolder="Select users"
  12.       nzAllowClear
  13.       nzShowSearch
  14.       nzServerSearch
  15.       [(ngModel)]="selectedUser"
  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.       nz-select {
  29.         width: 100%;
  30.       }
  32.       .loading-icon {
  33.         margin-right: 8px;
  34.       }
  35.     `
  36.   ]
  37. })
  38. export class NzDemoSelectSelectUsersComponent implements OnInit {
  39.   randomUserUrl = 'https://api.randomuser.me/?results=5';
  40.   searchChange$ = new BehaviorSubject('');
  41.   optionList: string[] = [];
  42.   selectedUser?: string;
  43.   isLoading = false;
  45.   onSearch(value: string): void {
  46.     this.isLoading = true;
  47.     this.searchChange$.next(value);
  48.   }
  50.   constructor(private http: HttpClient) {}
  52.   ngOnInit(): void {
  53.     // tslint:disable:no-any
  54.     const getRandomNameList = (name: string) =>
  55.       this.http
  56.         .get(`${this.randomUserUrl}`)
  57.         .pipe(map((res: any) => res.results))
  58.         .pipe(
  59.           map((list: any) => {
  60.             return list.map((item: any) => `${item.name.first} ${name}`);
  61.           })
  62.         );
  63.     const optionList$: Observable<string[]> = this.searchChange$
  64.       .asObservable()
  65.       .pipe(debounceTime(500))
  66.       .pipe(switchMap(getRandomNameList));
  67.     optionList$.subscribe(data => {
  68.       this.optionList = data;
  69.       this.isLoading = false;
  70.     });
  71.   }
  72. }

Select选择器 - 图9

隐藏已选择选项

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-hide-selected',
  5.   template: `
  6.     <nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" [(ngModel)]="listOfSelectedValue">
  7.       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option" [nzValue]="option" [nzHide]="!isNotSelected(option)"></nz-option>
  8.     </nz-select>
  9.   `,
  10.   styles: [
  11.     `
  12.       nz-select {
  13.         width: 100%;
  14.       }
  15.     `
  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选择器 - 图10

下拉加载

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

  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.       [(ngModel)]="selectedUser"
  11.       (nzScrollToBottom)="loadMore()"
  12.       nzPlaceHolder="Select users"
  13.       nzAllowClear
  14.       [nzDropdownRender]="renderTemplate"
  15.     >
  16.       <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o"></nz-option>
  17.     </nz-select>
  18.     <ng-template #renderTemplate>
  19.       <nz-spin *ngIf="isLoading"></nz-spin>
  20.     </ng-template>
  21.   `,
  22.   styles: [
  23.     `
  24.       nz-select {
  25.         width: 100%;
  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.     );
  45.   loadMore(): void {
  46.     this.isLoading = true;
  47.     this.getRandomNameList.subscribe(data => {
  48.       this.isLoading = false;
  49.       this.optionList = [...this.optionList, ...data];
  50.     });
  51.   }
  53.   constructor(private http: HttpClient) {}
  55.   ngOnInit(): void {
  56.     this.loadMore();
  57.   }
  58. }

Select选择器 - 图11

大量数据

组件使用了虚拟滚动技术，可以同时处理大量数据。

  1. import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-big-data',
  5.   changeDetection: ChangeDetectionStrategy.OnPush,
  6.   template: `
  7.     <nz-select nzMode="multiple" nzPlaceHolder="Please select" [nzOptions]="listOfOption" [(ngModel)]="listOfSelectedValue"> </nz-select>
  8.   `,
  9.   styles: [
  10.     `
  11.       nz-select {
  12.         width: 100%;
  13.       }
  14.     `
  15.   ]
  16. })
  17. export class NzDemoSelectBigDataComponent implements OnInit {
  18.   listOfOption: Array<{ value: string; label: string }> = [];
  19.   listOfSelectedValue = ['a10', 'c12'];
  21.   ngOnInit(): void {
  22.     const children: string[] = [];
  23.     for (let i = 10; i < 10000; i++) {
  24.       children.push(`${i.toString(36)}${i}`);
  25.     }
  26.     this.listOfOption = children.map(item => {
  27.       return {
  28.         value: item,
  29.         label: item
  30.       };
  31.     });
  32.   }
  33. }

Select选择器 - 图12

自定义选择标签

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-custom-template',
  5.   template: `
  6.     <nz-select nzAllowClear nzPlaceHolder="Select OS" [nzCustomTemplate]="defaultTemplate">
  7.       <nz-option nzLabel="Windows" nzValue="windows"></nz-option>
  8.       <nz-option nzLabel="Apple" nzValue="apple"></nz-option>
  9.       <nz-option nzLabel="Android" nzValue="android"></nz-option>
  10.     </nz-select>
  11.     <ng-template #defaultTemplate let-selected> <i nz-icon [nzType]="selected.nzValue"></i> {{ selected.nzLabel }} </ng-template>
  12.     <br />
  13.     <br />
  14.     <nz-select nzAllowClear nzPlaceHolder="Select OS" nzMode="multiple" [nzCustomTemplate]="multipleTemplate">
  15.       <nz-option nzLabel="Windows" nzValue="windows"></nz-option>
  16.       <nz-option nzLabel="Apple" nzValue="apple"></nz-option>
  17.       <nz-option nzLabel="Android" nzValue="android"></nz-option>
  18.     </nz-select>
  19.     <ng-template #multipleTemplate let-selected>
  20.       <div class="ant-select-selection-item-content"><i nz-icon [nzType]="selected.nzValue"></i> {{ selected.nzLabel }}</div>
  21.     </ng-template>
  22.   `,
  23.   styles: [
  24.     `
  25.       nz-select {
  26.         width: 100%;
  27.       }
  28.     `
  29.   ]
  30. })
  31. export class NzDemoSelectCustomTemplateComponent {}

Select选择器 - 图13

带搜索框

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

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

Select选择器 - 图14

三种大小

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

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

Select选择器 - 图15

分组

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-optgroup',
  5.   template: `
  6.     <nz-select [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose" nzShowSearch>
  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.   styles: [
  17.     `
  18.       nz-select {
  19.         width: 120px;
  20.       }
  21.     `
  22.   ]
  23. })
  24. export class NzDemoSelectOptgroupComponent {
  25.   selectedValue = 'lucy';
  26. }

Select选择器 - 图16

搜索框

搜索和远程数据结合。

  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.       nzShowSearch
  9.       nzServerSearch
  10.       nzPlaceHolder="input search text"
  11.       [(ngModel)]="selectedValue"
  12.       [nzShowArrow]="false"
  13.       [nzFilterOption]="nzFilterOption"
  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.   styles: [
  20.     `
  21.       nz-select {
  22.         width: 200px;
  23.       }
  24.     `
  25.   ]
  26. })
  27. export class NzDemoSelectSearchBoxComponent {
  28.   selectedValue = null;
  29.   listOfOption: Array<{ value: string; text: string }> = [];
  30.   nzFilterOption = () => true;
  32.   constructor(private httpClient: HttpClient) {}
  34.   search(value: string): void {
  35.     this.httpClient
  36.       .jsonp<{ result: Array<[string, string]> }>(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, 'callback')
  37.       .subscribe(data => {
  38.         const listOfOption: Array<{ value: string; text: string }> = [];
  39.         data.result.forEach(item => {
  40.           listOfOption.push({
  41.             value: item[0],
  42.             text: item[0]
  43.           });
  44.         });
  45.         this.listOfOption = listOfOption;
  46.       });
  47.   }
  48. }

Select选择器 - 图17

自动分词

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

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

Select选择器 - 图18

扩展菜单

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-custom-dropdown-menu',
  5.   template: `
  6.     <nz-select nzShowSearch nzAllowClear [nzDropdownRender]="renderTemplate" nzPlaceHolder="custom dropdown render">
  7.       <nz-option *ngFor="let item of listOfItem" [nzLabel]="item" [nzValue]="item"></nz-option>
  8.     </nz-select>
  9.     <ng-template #renderTemplate>
  10.       <nz-divider></nz-divider>
  11.       <div class="container">
  12.         <input type="text" nz-input #inputElement />
  13.         <a class="add-item" (click)="addItem(inputElement)"><i nz-icon nzType="plus"></i> Add item</a>
  14.       </div>
  15.     </ng-template>
  16.   `,
  17.   styles: [
  18.     `
  19.       nz-select {
  20.         width: 240px;
  21.       }
  22.       nz-divider {
  23.         margin: 4px 0;
  24.       }
  25.       .container {
  26.         display: flex;
  27.         flex-wrap: nowrap;
  28.         padding: 8px;
  29.       }
  30.       input {
  31.       }
  32.       .add-item {
  33.         flex: 0 0 auto;
  34.         padding: 8px;
  35.         display: block;
  36.       }
  37.     `
  38.   ]
  39. })
  40. export class NzDemoSelectCustomDropdownMenuComponent {
  41.   listOfItem = ['jack', 'lucy'];
  42.   index = 0;
  43.   addItem(input: HTMLInputElement): void {
  44.     const value = input.value;
  45.     if (this.listOfItem.indexOf(value) === -1) {
  46.       this.listOfItem = [...this.listOfItem, input.value || `New item ${this.index++}`];
  47.     }
  48.   }
  49. }

Select选择器 - 图19

自定义下拉菜单内容

通过 nzCustomContent 自定义下拉菜单选项显示的内容。

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

Select选择器 - 图20

默认数据

当需要显示默认值，同时默认值又不在选项列表中时，可以使用 nzHide 在 nz-option 中将默认选项隐藏

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-default-value',
  5.   template: `
  6.     <nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" [(ngModel)]="listOfSelectedValue">
  7.       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option" [nzValue]="option"></nz-option>
  8.       <nz-option *ngFor="let option of defaultOption" [nzLabel]="option" [nzValue]="option" nzHide></nz-option>
  9.     </nz-select>
  10.     <br />
  11.     <br />
  12.     <nz-select [(ngModel)]="selectedValue">
  13.       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option" [nzValue]="option"></nz-option>
  14.       <nz-option nzLabel="Default Value" nzValue="Default" nzHide></nz-option>
  15.     </nz-select>
  16.   `,
  17.   styles: [
  18.     `
  19.       nz-select {
  20.         width: 100%;
  21.       }
  22.     `
  23.   ]
  24. })
  25. export class NzDemoSelectDefaultValueComponent {
  26.   listOfOption = ['Option 01', 'Option 02'];
  27.   listOfSelectedValue = ['Default 01', 'Default 02'];
  28.   defaultOption = [...this.listOfSelectedValue];
  30.   selectedValue = 'Default';
  31. }

Select选择器 - 图21

无边框

无边框样式。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-border-less',
  5.   template: `
  6.     <nz-select ngModel="lucy" nzBorderless>
  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 ngModel="lucy" nzDisabled nzBorderless>
  12.       <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  13.     </nz-select>
  14.   `,
  15.   styles: [
  16.     `
  17.       nz-select {
  18.         margin: 0 8px 10px 0;
  19.         width: 120px;
  20.       }
  21.     `
  22.   ]
  23. })
  24. export class NzDemoSelectBorderLessComponent {}

Select选择器 - 图22

传入 Options

通过 nzOptions 直接传入选项内容

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-select-options',
  5.   template: `
  6.     <nz-select ngModel="lucy" [nzOptions]="listOfOption"></nz-select>
  7.     <nz-select [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose" [nzOptions]="listOfGroupOption"></nz-select>
  8.   `,
  9.   styles: [
  10.     `
  11.       nz-select {
  12.         margin: 0 8px 10px 0;
  13.         width: 120px;
  14.       }
  15.     `
  16.   ]
  17. })
  18. export class NzDemoSelectOptionsComponent {
  19.   selectedValue = 'lucy';
  20.   listOfOption = [
  21.     { label: 'Jack', value: 'jack' },
  22.     { label: 'Lucy', value: 'lucy' },
  23.     { label: 'disabled', value: 'disabled', disabled: true }
  24.   ];
  25.   listOfGroupOption = [
  26.     { label: 'Jack', value: 'jack', groupLabel: 'Manager' },
  27.     { label: 'Lucy', value: 'lucy', groupLabel: 'Manager' },
  28.     { label: 'Tom', value: 'tom', groupLabel: 'Engineer' }
  29.   ];
  30. }

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
[nzBorderless]是否无边框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]是否显示下拉小箭头boolean单选为 true，多选为 false
[nzShowSearch]使单选模式可搜索booleanfalse
[nzSize]选择框大小‘large’ | ‘small’ | ‘default’‘default’
[nzSuffixIcon]自定义的选择框后缀图标TemplateRef<any> | string-✅
[nzRemoveIcon]自定义的多选框清除图标TemplateRef<any>-
[nzClearIcon]自定义的多选框清空图标TemplateRef<any>-
[nzMenuItemSelectedIcon]自定义当前选中的条目图标TemplateRef<any>-
[nzTokenSeparators]在 tags 和 multiple 模式下自动分词的分隔符string[][]
[nzLoading]加载中状态booleanfalse
[nzMaxTagCount]最多显示多少个 tagnumber-
[nzMaxTagPlaceholder]隐藏 tag 时显示的内容TemplateRef<{ $implicit: any[] }>-
[nzOptions]option 列表，可以取代 nz-option，用法参见例子Array<{ label: string | TemplateRef<any>; value: any; disabled?: boolean; hide?: boolean; groupLabel?: string | TemplateRef<any>;}>-
[nzOptionHeightPx]下拉菜单中每个 Option 的高度number32
[nzOptionOverflowSize]下拉菜单中最多展示的 Option 个数，超出部分滚动number8
(ngModelChange)选中的 nz-option 发生变化时，调用此函数EventEmitter<any[]>-
(nzOpenChange)下拉菜单打开状态变化回调EventEmitter<boolean>-
(nzScrollToBottom)下拉列表滚动到底部的回调EventEmitter<any>-
(nzOnSearch)文本框值变化时回调EventEmitter<string>-
(nzFocus)focus时回调EventEmitter<any>-
(nzBlur)blur时回调EventEmitter<any>-

nz-optioncomponent

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

nz-option-groupcomponent

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

方法

nz-selectcomponent

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