Select选择器

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

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

    基本使用

    基本使用。

    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. }

    标签

    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. }

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

    Select选择器 - 图6

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

    隐藏已选择选项

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

    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

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

    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. }

    带搜索框

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

    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.       style="width: 100%"
    21.       [(ngModel)]="multipleValue"
    22.       [nzSize]="size"
    23.       nzMode="multiple"
    24.       nzPlaceHolder="Please select"
    25.     >
    26.       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
    27.     </nz-select>
    28.     <br /><br />
    29.     <nz-select style="width: 100%" [(ngModel)]="tagValue" [nzSize]="size" nzMode="tags" nzPlaceHolder="Please select">
    30.       <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
    31.     </nz-select>
    32.   `
    33. })
    34. export class NzDemoSelectSizeComponent implements OnInit {
    35.   listOfOption: Array<{ label: string; value: string }> = [];
    36.   size = 'default';
    37.   singleValue = 'a10';
    38.   multipleValue = ['a10', 'c12'];
    39.   tagValue = ['a10', 'c12', 'tag'];
    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. }

    用 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

    搜索框

    搜索和远程数据结合。

    试下复制 露西,杰克 到输入框里。只在 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 }> = [];
    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 {}

    通过 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. }
    1. <nz-select>
    2. </nz-select>