feat(module:select): support default value not in the option list (NG…

…-ZORRO#4261) close NG-ZORRO#3672 close NG-ZORRO#4000
Ricbet · Apr 9, 2020 · 06581fc · 06581fc
1 parent 6848f4f
commit 06581fc
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 16 deletions.
diff --git a/components/select/demo/default-value.md b/components/select/demo/default-value.md
@@ -0,0 +1,14 @@
+---
+order: 19
+title:
+  zh-CN: 默认数据
+  en-US: Default Value
+---
+
+## zh-CN
+
+当需要显示默认值，同时默认值又不在选项列表中时，可以使用 `nzHide` 在 `nz-option` 中将默认选项隐藏
+
+## en-US
+
+Display a default value that not in the option list with `nzHide` in `nz-option`
diff --git a/components/select/demo/default-value.ts b/components/select/demo/default-value.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-select-default-value',
+  template: `
+    <nz-select
+      style="width: 100%"
+      nzMode="multiple"
+      nzPlaceHolder="Inserted are removed"
+      [(ngModel)]="listOfSelectedValue"
+    >
+      <nz-option *ngFor="let option of listOfOption" [nzLabel]="option" [nzValue]="option"></nz-option>
+      <nz-option *ngFor="let option of defaultOption" [nzLabel]="option" [nzValue]="option" nzHide></nz-option>
+    </nz-select>
+    <br />
+    <br />
+    <nz-select style="width: 100%" [(ngModel)]="selectedValue">
+      <nz-option *ngFor="let option of listOfOption" [nzLabel]="option" [nzValue]="option"></nz-option>
+      <nz-option nzLabel="Default Value" nzValue="Default" nzHide></nz-option>
+    </nz-select>
+  `
+})
+export class NzDemoSelectDefaultValueComponent {
+  listOfOption = ['Option 01', 'Option 02'];
+  listOfSelectedValue = ['Default 01', 'Default 02'];
+  defaultOption = [...this.listOfSelectedValue];
+
+  selectedValue = 'Default';
+}
diff --git a/components/select/demo/hide-selected.md b/components/select/demo/hide-selected.md
@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-隐藏下拉列表中已选择的选项。
+通过 `nzHide` 隐藏下拉列表中已选择的选项。
 
 ## en-US
 
-Hide already selected options in the dropdown.
+Hide already selected options in the dropdown via `nzHide`.
diff --git a/components/select/demo/hide-selected.ts b/components/select/demo/hide-selected.ts
@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
       [(ngModel)]="listOfSelectedValue"
     >
       <ng-container *ngFor="let option of listOfOption">
-        <nz-option [nzLabel]="option" [nzValue]="option" *ngIf="isNotSelected(option)"></nz-option>
+        <nz-option [nzLabel]="option" [nzValue]="option" [nzHide]="!isNotSelected(option)"></nz-option>
       </ng-container>
     </nz-select>
   `

diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md
@@ -73,6 +73,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzDisabled]` | Disable this option | `boolean` | `false` |
 | `[nzLabel]` | The text show in nz-select and dropdown menu | `string` | - |
 | `[nzValue]` | The value passed to ngModel of nz-select | `any ` | - |
+| `[nzHide]` | Whether hide the option in the option list | `boolean` | `false` |
 | `[nzCustomContent]` | Whether custom nz-option content in drodown menu, the ng-content in nz-option will relace nzLabel when it was set to true | `boolean` | `false` |
 
 ### nz-option-group

diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md
@@ -74,6 +74,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
 | `[nzLabel]` | 选中该 nz-option 后，nz-select 中显示的文字 | `string` | - |
 | `[nzValue]` | nz-select 中 ngModel 的值 | `any` | - |
+| `[nzHide]` | 是否在选项列表中隐藏改选项 | `boolean` | `false` |
 | `[nzCustomContent]` | 是否自定义在下拉菜单中的Template内容，当为 true 时，nz-option 包裹的内容将直接渲染在下拉菜单中 | `boolean` | `false` |
 
 ### nz-option-group

diff --git a/components/select/nz-option-container.component.html b/components/select/nz-option-container.component.html
@@ -12,23 +12,27 @@
     [nzMenuItemSelectedIcon]="nzMenuItemSelectedIcon"
     [nzOption]="nzSelectService.addedTagOption">
   </li>
-  <li nz-option-li
-    *ngFor="let option of nzSelectService.listOfNzOptionComponent | nzFilterOption : nzSelectService.searchValue : nzSelectService.filterOption : nzSelectService.serverSearch; trackBy: trackValue"
-    [nzMenuItemSelectedIcon]="nzMenuItemSelectedIcon"
-    [nzOption]="option">
-  </li>
+  <ng-container *ngFor="let option of nzSelectService.listOfNzOptionComponent | nzFilterOption : nzSelectService.searchValue : nzSelectService.filterOption : nzSelectService.serverSearch; trackBy: trackValue">
+    <li nz-option-li
+      *ngIf="!option.nzHide"
+      [nzMenuItemSelectedIcon]="nzMenuItemSelectedIcon"
+      [nzOption]="option">
+    </li>
+  </ng-container>
   <li class="ant-select-dropdown-menu-item-group"
     *ngFor="let group of nzSelectService.listOfNzOptionGroupComponent | nzFilterGroupOption : nzSelectService.searchValue : nzSelectService.filterOption :nzSelectService.serverSearch; trackBy: trackLabel">
     <div class="ant-select-dropdown-menu-item-group-title"
       [attr.title]="group.isLabelString ? group.nzLabel : ''">
       <ng-container *nzStringTemplateOutlet="group.nzLabel"> {{group.nzLabel}} </ng-container>
     </div>
     <ul class="ant-select-dropdown-menu-item-group-list">
-      <li nz-option-li
-        *ngFor="let option of group.listOfNzOptionComponent | nzFilterOption : nzSelectService.searchValue : nzSelectService.filterOption :nzSelectService.serverSearch; trackBy: trackValue"
-        [nzMenuItemSelectedIcon]="nzMenuItemSelectedIcon"
-        [nzOption]="option">
-      </li>
+      <ng-container *ngFor="let option of group.listOfNzOptionComponent | nzFilterOption : nzSelectService.searchValue : nzSelectService.filterOption :nzSelectService.serverSearch; trackBy: trackValue">
+        <li nz-option-li
+          *ngIf="!option.nzHide"
+          [nzMenuItemSelectedIcon]="nzMenuItemSelectedIcon"
+          [nzOption]="option">
+        </li>
+      </ng-container>
     </ul>
   </li>
   <li nz-option-li

diff --git a/components/select/nz-option.component.ts b/components/select/nz-option.component.ts
@@ -33,6 +33,7 @@ export class NzOptionComponent implements OnChanges {
   // tslint:disable-next-line:no-any
   @Input() nzValue: any;
   @Input() @InputBoolean() nzDisabled = false;
+  @Input() @InputBoolean() nzHide = false;
   @Input() @InputBoolean() nzCustomContent = false;
 
   ngOnChanges(): void {

diff --git a/components/select/nz-option.pipe.ts b/components/select/nz-option.pipe.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, QueryList } from '@angular/core';
 import { NzOptionGroupComponent } from './nz-option-group.component';
 import { NzOptionComponent } from './nz-option.component';
 
@@ -15,13 +15,13 @@ export type TFilterOption = (input: string, option: NzOptionComponent) => boolea
 @Pipe({ name: 'nzFilterOption' })
 export class NzFilterOptionPipe implements PipeTransform {
   transform(
-    options: NzOptionComponent[],
+    options: NzOptionComponent[] | QueryList<NzOptionComponent>,
     searchValue: string,
     filterOption: TFilterOption,
     serverSearch: boolean
   ): NzOptionComponent[] {
     if (serverSearch || !searchValue) {
-      return options;
+      return options as NzOptionComponent[];
     } else {
       return (options as NzOptionComponent[]).filter(o => filterOption(searchValue, o));
     }