From 8ac39824aadbbe85383e9a088ec4a26e067c58e7 Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Mon, 11 Mar 2019 20:12:22 +1100 Subject: [PATCH 01/13] feat(module:select): support custom template in select component close #2946 --- components/select/demo/custom-template.md | 15 ++++++++++++ components/select/demo/custom-template.ts | 23 +++++++++++++++++++ components/select/doc/index.en-US.md | 1 + components/select/doc/index.zh-CN.md | 1 + .../nz-select-top-control.component.html | 7 +++++- .../select/nz-select-top-control.component.ts | 8 ++++++- components/select/nz-select.component.html | 3 +-- components/select/nz-select.component.spec.ts | 19 +++++++++++++++ components/select/nz-select.component.ts | 1 + 9 files changed, 74 insertions(+), 4 deletions(-) create mode 100644 components/select/demo/custom-template.md create mode 100644 components/select/demo/custom-template.ts diff --git a/components/select/demo/custom-template.md b/components/select/demo/custom-template.md new file mode 100644 index 0000000000..19f0fc79b5 --- /dev/null +++ b/components/select/demo/custom-template.md @@ -0,0 +1,15 @@ +--- +order: 18 +title: + zh-CN: 自定义选择器内容 + en-US: Custom Select Template +--- + +## zh-CN + +通过 `nzCustomTemplate` 自定义 nz-select 显示的内容。 + +## en-US + +Custom the content of nz-select via `nzCustomTemplate`. + diff --git a/components/select/demo/custom-template.ts b/components/select/demo/custom-template.ts new file mode 100644 index 0000000000..602e4c37cf --- /dev/null +++ b/components/select/demo/custom-template.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-select-custom-template', + template: ` + + Windows + Mac + Android + + +
+ Label: {{selected.nzLabel}} +
+
+ Value: {{ selected.nzValue }} +
+ + ` +}) +export class NzDemoSelectCustomTemplateComponent { + selectedOS; +} diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md index 31f438f3d6..3472a0bee2 100644 --- a/components/select/doc/index.en-US.md +++ b/components/select/doc/index.en-US.md @@ -41,6 +41,7 @@ import { NzSelectModule } from 'ng-zorro-antd'; | `[nzDropdownClassName]` | className of dropdown menu | `string` | - | | `[nzDropdownMatchSelectWidth]` | Whether dropdown's with is same with select. | `boolean` | `true` | | `[nzDropdownStyle]` | style of dropdown menu | `object` | - | +| `[nzCustomTemplate]` | The custom template of select | `TemplateRef` | - | | `[nzServerSearch]` | nz-option will not be filtered when set to true | `boolean` | `false` | | `[nzFilterOption]` | Filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | Max selected option can be selected | `number` | `Infinity` | diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md index dd41e64ae7..4581b36ca7 100644 --- a/components/select/doc/index.zh-CN.md +++ b/components/select/doc/index.zh-CN.md @@ -42,6 +42,7 @@ import { NzSelectModule } from 'ng-zorro-antd'; | `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string` | - | | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | | `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - | +| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef` | - | | `[nzServerSearch]` | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` | | `[nzFilterOption]` | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | 最多选中多少个标签| `number` | `Infinity` | diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html index cf7670dcea..ee93a0c89a 100644 --- a/components/select/nz-select-top-control.component.html +++ b/components/select/nz-select-top-control.component.html @@ -21,7 +21,12 @@ class="ant-select-selection-selected-value" [attr.title]="nzSelectService.listOfCachedSelectedOption[0]?.nzLabel" [ngStyle]="selectedValueStyle"> - {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }} + + + + + {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }} +
; @Input() nzSuffixIcon: TemplateRef; @Input() nzClearIcon: TemplateRef; @Input() nzRemoveIcon: TemplateRef; diff --git a/components/select/nz-select.component.html b/components/select/nz-select.component.html index d0faae40c0..f5bd566679 100644 --- a/components/select/nz-select.component.html +++ b/components/select/nz-select.component.html @@ -10,13 +10,12 @@ [nzMaxTagCount]="nzMaxTagCount" [nzShowArrow]="nzShowArrow" [nzLoading]="nzLoading" + [nzCustomTemplate]="nzCustomTemplate" [nzSuffixIcon]="nzSuffixIcon" [nzClearIcon]="nzClearIcon" [nzRemoveIcon]="nzRemoveIcon" [nzShowSearch]="nzShowSearch" [nzTokenSeparators]="nzTokenSeparators" - [class.ant-select-selection--single]="nzSelectService.isSingleMode" - [class.ant-select-selection--multiple]="nzSelectService.isMultipleOrTags" (keydown)="onKeyDown($event)">
{ expect(targetElement.style.width).toBe(''); expect(targetElement.style.minWidth).toBe('10px'); })); + it('should custom template work', () => { + select.nativeElement.click(); + fixture.detectChanges(); + expect(testComponent.open).toBe(true); + fixture.detectChanges(); + overlayContainerElement.querySelector('li').click(); + fixture.detectChanges(); + const selection = select.nativeElement.querySelector('.ant-select-selection') as HTMLElement; + expect(selection.textContent).toContain('Label: Jack Value: jack'); + }); it('should click option close dropdown', () => { testComponent.showSearch = true; select.nativeElement.click(); @@ -406,6 +416,7 @@ describe('nz-select component', () => { [nzDropdownMatchSelectWidth]="dropdownMatchSelectWidth" [nzDropdownStyle]="dropdownStyle" [nzDropdownClassName]="'test-class'" + [nzCustomTemplate]="custom" (nzOnSearch)="onSearch($event)" [nzPlaceHolder]="placeholder" > @@ -413,6 +424,14 @@ describe('nz-select component', () => { + +
+ Label: {{selected.nzLabel}} +
+
+ Value: {{ selected.nzValue }} +
+ ` }) export class NzTestSelectDefaultComponent { diff --git a/components/select/nz-select.component.ts b/components/select/nz-select.component.ts index 79c02278e4..6e2b921a2d 100644 --- a/components/select/nz-select.component.ts +++ b/components/select/nz-select.component.ts @@ -123,6 +123,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie @Input() nzPlaceHolder: string; @Input() nzMaxTagCount: number; @Input() nzDropdownRender: TemplateRef; + @Input() nzCustomTemplate: TemplateRef; @Input() nzSuffixIcon: TemplateRef; @Input() nzClearIcon: TemplateRef; @Input() nzRemoveIcon: TemplateRef; From 9912caa73e9bcddf01e8d9e99caad8ee97c97130 Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Thu, 28 Mar 2019 14:52:20 +1100 Subject: [PATCH 02/13] feat(module:select): reformat code --- components/select/nz-select-top-control.component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/select/nz-select-top-control.component.ts b/components/select/nz-select-top-control.component.ts index da660ef9d3..d6ebf1f6fe 100644 --- a/components/select/nz-select-top-control.component.ts +++ b/components/select/nz-select-top-control.component.ts @@ -37,10 +37,10 @@ import { NzSelectService } from './nz-select.service'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, templateUrl: './nz-select-top-control.component.html', - host : { - '[class.ant-select-selection--single]' : '!nzCustomTemplate && nzSelectService.isSingleMode', - '[class.ant-select-selection--multiple]' : 'nzCustomTemplate || nzSelectService.isMultipleOrTags', - '[style.cursor]' : 'nzShowSearch ? "inherit" : "pointer"' + host: { + '[class.ant-select-selection--single]': '!nzCustomTemplate && nzSelectService.isSingleMode', + '[class.ant-select-selection--multiple]': 'nzCustomTemplate || nzSelectService.isMultipleOrTags', + '[style.cursor]': 'nzShowSearch ? "inherit" : "pointer"' } }) export class NzSelectTopControlComponent implements OnInit, OnDestroy { From 9eba5d74933c02de76fcbc4435bdb5941de6ca85 Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Thu, 28 Mar 2019 17:11:01 +1100 Subject: [PATCH 03/13] feat(module:select): fix the test --- components/select/demo/custom-template.ts | 18 ++++++++++-------- components/select/nz-select.component.spec.ts | 10 +++------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/components/select/demo/custom-template.ts b/components/select/demo/custom-template.ts index 602e4c37cf..a3dd15892b 100644 --- a/components/select/demo/custom-template.ts +++ b/components/select/demo/custom-template.ts @@ -3,21 +3,23 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-select-custom-template', template: ` - + Windows Mac Android -
- Label: {{selected.nzLabel}} -
-
- Value: {{ selected.nzValue }} -
+
Label: {{ selected.nzLabel }}
+
Value: {{ selected.nzValue }}
 ` }) export class NzDemoSelectCustomTemplateComponent { - selectedOS; + selectedOS = null; } diff --git a/components/select/nz-select.component.spec.ts b/components/select/nz-select.component.spec.ts index 42f9fe12f4..7d6e86d5b6 100644 --- a/components/select/nz-select.component.spec.ts +++ b/components/select/nz-select.component.spec.ts @@ -167,7 +167,7 @@ describe('nz-select component', () => { fixture.detectChanges(); expect(testComponent.open).toBe(true); fixture.detectChanges(); - overlayContainerElement.querySelector('li').click(); + overlayContainerElement.querySelector('li')!.click(); fixture.detectChanges(); const selection = select.nativeElement.querySelector('.ant-select-selection') as HTMLElement; expect(selection.textContent).toContain('Label: Jack Value: jack'); @@ -425,12 +425,8 @@ describe('nz-select component', () => { -
- Label: {{selected.nzLabel}} -
-
- Value: {{ selected.nzValue }} -
+
Label: {{ selected.nzLabel }}
+
Value: {{ selected.nzValue }}
 ` }) From 9aa0512c1c60f078bfa17be7c7cb3e451c94d471 Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Thu, 28 Mar 2019 20:59:07 +1100 Subject: [PATCH 04/13] feat(module:select): improve test --- components/select/nz-select.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/nz-select.component.spec.ts b/components/select/nz-select.component.spec.ts index 7d6e86d5b6..d4b7a3159f 100644 --- a/components/select/nz-select.component.spec.ts +++ b/components/select/nz-select.component.spec.ts @@ -170,7 +170,7 @@ describe('nz-select component', () => { overlayContainerElement.querySelector('li')!.click(); fixture.detectChanges(); const selection = select.nativeElement.querySelector('.ant-select-selection') as HTMLElement; - expect(selection.textContent).toContain('Label: Jack Value: jack'); + expect(selection.innerText).toContain('Label: Jack\nValue: jack'); }); it('should click option close dropdown', () => { testComponent.showSearch = true; From 7810dc7c935d9364535d67541039f0b29f48ea14 Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Tue, 16 Apr 2019 15:12:46 +1000 Subject: [PATCH 05/13] feat(module:select): fix templateRef type for customTemplate --- components/select/doc/index.en-US.md | 2 +- components/select/doc/index.zh-CN.md | 2 +- components/select/nz-select-top-control.component.ts | 2 +- components/select/nz-select.component.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md index 3472a0bee2..97af3ee297 100644 --- a/components/select/doc/index.en-US.md +++ b/components/select/doc/index.en-US.md @@ -41,7 +41,7 @@ import { NzSelectModule } from 'ng-zorro-antd'; | `[nzDropdownClassName]` | className of dropdown menu | `string` | - | | `[nzDropdownMatchSelectWidth]` | Whether dropdown's with is same with select. | `boolean` | `true` | | `[nzDropdownStyle]` | style of dropdown menu | `object` | - | -| `[nzCustomTemplate]` | The custom template of select | `TemplateRef` | - | +| `[nzCustomTemplate]` | The custom template of select | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | | `[nzServerSearch]` | nz-option will not be filtered when set to true | `boolean` | `false` | | `[nzFilterOption]` | Filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | Max selected option can be selected | `number` | `Infinity` | diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md index 4581b36ca7..d8edeb9249 100644 --- a/components/select/doc/index.zh-CN.md +++ b/components/select/doc/index.zh-CN.md @@ -42,7 +42,7 @@ import { NzSelectModule } from 'ng-zorro-antd'; | `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string` | - | | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | | `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - | -| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef` | - | +| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | | `[nzServerSearch]` | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` | | `[nzFilterOption]` | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | 最多选中多少个标签| `number` | `Infinity` | diff --git a/components/select/nz-select-top-control.component.ts b/components/select/nz-select-top-control.component.ts index d6ebf1f6fe..8873a00366 100644 --- a/components/select/nz-select-top-control.component.ts +++ b/components/select/nz-select-top-control.component.ts @@ -55,7 +55,7 @@ export class NzSelectTopControlComponent implements OnInit, OnDestroy { @Input() nzAllowClear = false; @Input() nzShowArrow = true; @Input() nzLoading = false; - @Input() nzCustomTemplate: TemplateRef; + @Input() nzCustomTemplate: TemplateRef<{ $implicit: NzOptionComponent }>; @Input() nzSuffixIcon: TemplateRef; @Input() nzClearIcon: TemplateRef; @Input() nzRemoveIcon: TemplateRef; diff --git a/components/select/nz-select.component.ts b/components/select/nz-select.component.ts index 6e2b921a2d..99a6b67350 100644 --- a/components/select/nz-select.component.ts +++ b/components/select/nz-select.component.ts @@ -123,7 +123,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie @Input() nzPlaceHolder: string; @Input() nzMaxTagCount: number; @Input() nzDropdownRender: TemplateRef; - @Input() nzCustomTemplate: TemplateRef; + @Input() nzCustomTemplate: TemplateRef<{ $implicit: NzOptionComponent }>; @Input() nzSuffixIcon: TemplateRef; @Input() nzClearIcon: TemplateRef; @Input() nzRemoveIcon: TemplateRef; From c72b2170b22a73295484a94e032b701f7dff98a0 Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Mon, 22 Apr 2019 21:57:02 +1000 Subject: [PATCH 06/13] feat(module:select): add support to multiple and tags --- components/select/doc/index.en-US.md | 2 +- components/select/doc/index.zh-CN.md | 2 +- .../nz-select-top-control.component.html | 35 +++++++++++-------- .../select/nz-select-top-control.component.ts | 4 +-- 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md index 97af3ee297..2a332420d4 100644 --- a/components/select/doc/index.en-US.md +++ b/components/select/doc/index.en-US.md @@ -41,7 +41,7 @@ import { NzSelectModule } from 'ng-zorro-antd'; | `[nzDropdownClassName]` | className of dropdown menu | `string` | - | | `[nzDropdownMatchSelectWidth]` | Whether dropdown's with is same with select. | `boolean` | `true` | | `[nzDropdownStyle]` | style of dropdown menu | `object` | - | -| `[nzCustomTemplate]` | The custom template of select | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | +| `[nzCustomTemplate]` | The custom template of select | `TemplateRef<{ $implicit: NzOptionComponent | NzOptionComponent[] }>` | - | | `[nzServerSearch]` | nz-option will not be filtered when set to true | `boolean` | `false` | | `[nzFilterOption]` | Filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | Max selected option can be selected | `number` | `Infinity` | diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md index d8edeb9249..f4baa357b5 100644 --- a/components/select/doc/index.zh-CN.md +++ b/components/select/doc/index.zh-CN.md @@ -42,7 +42,7 @@ import { NzSelectModule } from 'ng-zorro-antd'; | `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string` | - | | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | | `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - | -| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | +| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef<{ $implicit: NzOptionComponent | NzOptionComponent[] }>` | - | | `[nzServerSearch]` | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` | | `[nzFilterOption]` | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | 最多选中多少个标签| `number` | `Infinity` | diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html index ee93a0c89a..a8b356d6b1 100644 --- a/components/select/nz-select-top-control.component.html +++ b/components/select/nz-select-top-control.component.html @@ -39,21 +39,28 @@
    - -
  • -
    {{ option.nzLabel }}
    - - - -
    • + + + + + + +
  • +
    {{ option.nzLabel }}
    + + + +
    • +     +
  • Date: Thu, 20 Jun 2019 17:34:55 +1000 Subject: [PATCH 07/13] fix(module:select): fix template --- components/select/demo/custom-template.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/select/demo/custom-template.ts b/components/select/demo/custom-template.ts index a3dd15892b..4964039a0d 100644 --- a/components/select/demo/custom-template.ts +++ b/components/select/demo/custom-template.ts @@ -15,8 +15,7 @@ import { Component } from '@angular/core'; Android -
    Label: {{ selected.nzLabel }}
    -
    Value: {{ selected.nzValue }}
    + Label: {{ selected.nzLabel }} Value: {{ selected.nzValue }}     ` }) From 854bce293d93a1580f37948420ae2489976ba2a1 Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Thu, 20 Jun 2019 21:34:23 +1000 Subject: [PATCH 08/13] feat(module:select): fix support for multiple and tag select. --- .../nz-select-top-control.component.html | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html index a8b356d6b1..059d3c69e9 100644 --- a/components/select/nz-select-top-control.component.html +++ b/components/select/nz-select-top-control.component.html @@ -39,28 +39,26 @@
      - - - - - - - -
    • + +
    • + + + +
      {{ option.nzLabel }}
      - - - -
      • -       -       + + + + + +
    • Date: Sat, 22 Jun 2019 19:07:30 +1000 Subject: [PATCH 09/13] feat(module:select): fix doc --- components/select/doc/index.en-US.md | 2 +- components/select/doc/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md index 2a332420d4..97af3ee297 100644 --- a/components/select/doc/index.en-US.md +++ b/components/select/doc/index.en-US.md @@ -41,7 +41,7 @@ import { NzSelectModule } from 'ng-zorro-antd'; | `[nzDropdownClassName]` | className of dropdown menu | `string` | - | | `[nzDropdownMatchSelectWidth]` | Whether dropdown's with is same with select. | `boolean` | `true` | | `[nzDropdownStyle]` | style of dropdown menu | `object` | - | -| `[nzCustomTemplate]` | The custom template of select | `TemplateRef<{ $implicit: NzOptionComponent | NzOptionComponent[] }>` | - | +| `[nzCustomTemplate]` | The custom template of select | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | | `[nzServerSearch]` | nz-option will not be filtered when set to true | `boolean` | `false` | | `[nzFilterOption]` | Filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | Max selected option can be selected | `number` | `Infinity` | diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md index f4baa357b5..d8edeb9249 100644 --- a/components/select/doc/index.zh-CN.md +++ b/components/select/doc/index.zh-CN.md @@ -42,7 +42,7 @@ import { NzSelectModule } from 'ng-zorro-antd'; | `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string` | - | | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | | `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - | -| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef<{ $implicit: NzOptionComponent | NzOptionComponent[] }>` | - | +| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | | `[nzServerSearch]` | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` | | `[nzFilterOption]` | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | 最多选中多少个标签| `number` | `Infinity` | From 17237fd915a41001801bdeb864c92c50ef13230a Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Sat, 22 Jun 2019 19:09:21 +1000 Subject: [PATCH 10/13] feat(module:select): simplify template --- .../select/nz-select-top-control.component.html | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html index 059d3c69e9..913813c68a 100644 --- a/components/select/nz-select-top-control.component.html +++ b/components/select/nz-select-top-control.component.html @@ -21,12 +21,9 @@ class="ant-select-selection-selected-value" [attr.title]="nzSelectService.listOfCachedSelectedOption[0]?.nzLabel" [ngStyle]="selectedValueStyle"> - - + +
      {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}
       - - {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }} -
      - - - - +
      {{ option.nzLabel }}
      -       + Date: Sat, 22 Jun 2019 19:10:04 +1000 Subject: [PATCH 11/13] feat(module:select): add tests for tags --- components/select/nz-select.component.spec.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/components/select/nz-select.component.spec.ts b/components/select/nz-select.component.spec.ts index d4b7a3159f..9aa239133e 100644 --- a/components/select/nz-select.component.spec.ts +++ b/components/select/nz-select.component.spec.ts @@ -289,6 +289,15 @@ describe('nz-select component', () => { fixture.detectChanges(); expect(testComponent.selectedValue.length).toBe(0); })); + it('should custom template work', fakeAsync(() => { + fixture.detectChanges(); + selectComponent.nzSelectService.updateListOfSelectedValue(['jack'], true); + fixture.detectChanges(); + flush(); + fixture.detectChanges(); + const selection = select.nativeElement.querySelector('.ant-select-selection') as HTMLElement; + expect(selection.innerText).toContain('Label: Jack\nValue: jack'); + })); }); describe('form', () => { @@ -457,11 +466,15 @@ export class NzTestSelectDefaultComponent { @Component({ template: ` - + Disabled + +
      Label: {{ selected.nzLabel }}
      +
      Value: {{ selected.nzValue }}
      +       ` }) export class NzTestSelectTagsComponent { From 4359d80e7b0bf70713cfcc1e78cc9959f754b8b2 Mon Sep 17 00:00:00 2001 From: Andrew Yang Date: Sat, 22 Jun 2019 20:17:45 +1000 Subject: [PATCH 12/13] feat(module:select): move class from host to template --- components/select/nz-select-top-control.component.ts | 2 -- components/select/nz-select.component.html | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/select/nz-select-top-control.component.ts b/components/select/nz-select-top-control.component.ts index d4086fb9d8..6bc3065bef 100644 --- a/components/select/nz-select-top-control.component.ts +++ b/components/select/nz-select-top-control.component.ts @@ -38,8 +38,6 @@ import { NzSelectService } from './nz-select.service'; encapsulation: ViewEncapsulation.None, templateUrl: './nz-select-top-control.component.html', host: { - '[class.ant-select-selection--single]': 'nzSelectService.isSingleMode', - '[class.ant-select-selection--multiple]': 'nzSelectService.isMultipleOrTags', '[style.cursor]': 'nzShowSearch ? "inherit" : "pointer"' } }) diff --git a/components/select/nz-select.component.html b/components/select/nz-select.component.html index f5bd566679..e7c0bfc5ab 100644 --- a/components/select/nz-select.component.html +++ b/components/select/nz-select.component.html @@ -16,6 +16,8 @@ [nzRemoveIcon]="nzRemoveIcon" [nzShowSearch]="nzShowSearch" [nzTokenSeparators]="nzTokenSeparators" + [class.ant-select-selection--single]="nzSelectService.isSingleMode" + [class.ant-select-selection--multiple]="nzSelectService.isMultipleOrTags" (keydown)="onKeyDown($event)">
      Date: Sat, 22 Jun 2019 20:57:14 +1000 Subject: [PATCH 13/13] feat(module:select): remove unused style --- components/select/nz-select-top-control.component.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/select/nz-select-top-control.component.ts b/components/select/nz-select-top-control.component.ts index 6bc3065bef..07602efe30 100644 --- a/components/select/nz-select-top-control.component.ts +++ b/components/select/nz-select-top-control.component.ts @@ -36,10 +36,7 @@ import { NzSelectService } from './nz-select.service'; animations: [zoomMotion], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, - templateUrl: './nz-select-top-control.component.html', - host: { - '[style.cursor]': 'nzShowSearch ? "inherit" : "pointer"' - } + templateUrl: './nz-select-top-control.component.html' }) export class NzSelectTopControlComponent implements OnInit, OnDestroy { inputValue: string;