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. <nz-select ngModel="lucy">
  6. <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
  7. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  8. <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
  9. </nz-select>
  10. <nz-select ngModel="lucy" nzDisabled>
  11. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  12. </nz-select>
  13. <nz-select ngModel="lucy" nzLoading>
  14. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  15. </nz-select>
  16. <nz-select ngModel="lucy" nzAllowClear nzPlaceHolder="Choose">
  17. <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  18. </nz-select>
  19. `,
  20. styles: [
  21. `
  22. nz-select {
  23. margin: 0 8px 10px 0;
  24. width: 120px;
  25. }
  26. `
  27. ]
  28. })
  29. export class NzDemoSelectBasicComponent {}

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

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

Select选择器 - 图4

联动

省市联动是典型的例子。

推荐使用 Cascader 组件。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-coordinate',
  4. template: `
  5. <div>
  6. <nz-select [(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 [(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. width: 120px;
  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. };
  31. provinceChange(value: string): void {
  32. this.selectedCity = this.cityData[value][0];
  33. }
  34. }

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

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

Select选择器 - 图7

隐藏已选择选项

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-select-hide-selected',
  4. template: `
  5. <nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" [(ngModel)]="listOfSelectedValue">
  6. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option" [nzValue]="option" [nzHide]="!isNotSelected(option)"></nz-option>
  7. </nz-select>
  8. `,
  9. styles: [
  10. `
  11. nz-select {
  12. width: 100%;
  13. }
  14. `
  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. [(ngModel)]="selectedUser"
  10. (nzScrollToBottom)="loadMore()"
  11. nzPlaceHolder="Select users"
  12. nzAllowClear
  13. [nzDropdownRender]="renderTemplate"
  14. >
  15. <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o"></nz-option>
  16. </nz-select>
  17. <ng-template #renderTemplate>
  18. <nz-spin *ngIf="isLoading"></nz-spin>
  19. </ng-template>
  20. `,
  21. styles: [
  22. `
  23. nz-select {
  24. width: 100%;
  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. loadMore(): void {
  44. this.isLoading = true;
  45. this.getRandomNameList.subscribe(data => {
  46. this.isLoading = false;
  47. this.optionList = [...this.optionList, ...data];
  48. });
  49. }
  50. constructor(private http: HttpClient) {}
  51. ngOnInit(): void {
  52. this.loadMore();
  53. }
  54. }

Select选择器 - 图9

大量数据

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

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

Select选择器 - 图10

自定义选择标签

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

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

Select选择器 - 图11

带搜索框

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

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

Select选择器 - 图12

三种大小

三种大小的选择框,当 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 [(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 [(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 [(ngModel)]="multipleValue" [nzSize]="size" nzMode="multiple" nzPlaceHolder="Please select">
  20. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
  21. </nz-select>
  22. <br /><br />
  23. <nz-select [(ngModel)]="tagValue" [nzSize]="size" nzMode="tags" nzPlaceHolder="Please select">
  24. <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
  25. </nz-select>
  26. `,
  27. styles: [
  28. `
  29. nz-select {
  30. width: 100%;
  31. }
  32. `
  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'];
  41. ngOnInit(): void {
  42. const children: Array<{ label: string; value: string }> = [];
  43. for (let i = 10; i < 36; i++) {
  44. children.push({ label: i.toString(36) + i, value: i.toString(36) + i });
  45. }
  46. this.listOfOption = children;
  47. }
  48. }

Select选择器 - 图13

分组

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

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

Select选择器 - 图14

搜索框

搜索和远程数据结合。

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

Select选择器 - 图15

自动分词

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

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

Select选择器 - 图16

扩展菜单

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

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

Select选择器 - 图17

自定义下拉菜单内容

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

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

Select选择器 - 图18

默认数据

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

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

Select选择器 - 图19

无边框

无边框样式。

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

Select选择器 - 图20

传入 Options

通过 nzOptions 直接传入选项内容

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

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