fix: use component insteadof value

NG-ZORRO · May 12, 2019 · b0cd7d8 · b0cd7d8
1 parent 1bb55c7
commit b0cd7d8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 20 deletions.
diff --git a/components/select/demo/select-users.ts b/components/select/demo/select-users.ts
@@ -1,15 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { debounceTime, map, switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'nz-demo-select-select-users',
   template: `
-    <p>{{ selectedUser | json }}</p>
     <nz-select
       style="width: 100%;"
-      nzMode="tags"
+      nzMode="multiple"
       [(ngModel)]="selectedUser"
       nzPlaceHolder="Select users"
       nzAllowClear
@@ -18,7 +17,7 @@ import { debounceTime, map, switchMap } from 'rxjs/operators';
       (nzOnSearch)="onSearch($event)"
     >
       <ng-container *ngFor="let o of optionList">
-        <nz-option *ngIf="!isLoading" [nzValue]="o" [nzLabel]="o.text"></nz-option>
+        <nz-option *ngIf="!isLoading" [nzValue]="o" [nzLabel]="o"></nz-option>
       </ng-container>
       <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
         <i nz-icon type="loading" class="loading-icon"></i> Loading Data...
@@ -36,7 +35,7 @@ import { debounceTime, map, switchMap } from 'rxjs/operators';
 export class NzDemoSelectSelectUsersComponent implements OnInit {
   randomUserUrl = 'https://api.randomuser.me/?results=5';
   searchChange$ = new BehaviorSubject('');
-  optionList: Array<{ text: string; id: number }> = [];
+  optionList: string[] = [];
   selectedUser: string;
   isLoading = false;
 
@@ -55,12 +54,12 @@ export class NzDemoSelectSelectUsersComponent implements OnInit {
         .pipe(map((res: any) => res.results))
         .pipe(
           map((list: any) => {
-            return list.map((item: any, index: number) => ({ text: `${item.name.first} ${name}`, id: index + 1 }));
+            return list.map((item: any) => `${item.name.first} ${name}`);
           })
         );
-    const optionList$ = this.searchChange$
+    const optionList$: Observable<string[]> = this.searchChange$
       .asObservable()
-      .pipe(debounceTime(100))
+      .pipe(debounceTime(500))
       .pipe(switchMap(getRandomNameList));
     optionList$.subscribe(data => {
       this.optionList = data;

diff --git a/components/select/nz-select.service.spec.ts b/components/select/nz-select.service.spec.ts
@@ -72,11 +72,18 @@ describe('SelectService', () => {
     beforeEach(() => {
       service.mode = 'tags';
     });
-    it('should updateListOfTagOption work', () => {
-      service.listOfSelectedValue = [`option_value_0`, `option_value_1`, `option_value_miss`];
+    fit('should updateListOfTagOption work', () => {
+      service.listOfCachedSelectedOption = [
+        { nzValue: `option_value_0`, nzLabel: `option_label_0` },
+        { nzValue: `option_value_1`, nzLabel: `option_label_1` },
+        { nzValue: `option_value_miss`, nzLabel: `option_label_miss` }
+        // tslint:disable-next-line: no-any
+      ] as any;
       service.listOfTemplateOption = createListOfOption(3);
       service.updateListOfTagOption();
       expect(service.listOfTagOption.length).toEqual(1);
+      expect(service.listOfTagOption[0].nzValue).toEqual('option_value_miss');
+      expect(service.listOfTagOption[0].nzLabel).toEqual('option_label_miss');
     });
     it('should updateAddTagOption work', () => {
       service.listOfSelectedValue = [`option_value_0`, `option_value_1`];

diff --git a/components/select/nz-select.service.ts b/components/select/nz-select.service.ts
@@ -167,28 +167,21 @@ export class NzSelectService {
     } else {
       const listOfCachedSelectedOption: NzOptionComponent[] = [];
       this.listOfSelectedValue.forEach(v => {
-        const listOfMixedOption = [...this.listOfCachedSelectedOption, ...this.listOfTagAndTemplateOption];
+        const listOfMixedOption = [...this.listOfTagAndTemplateOption, ...this.listOfCachedSelectedOption];
         const option = listOfMixedOption.find(o => this.compareWith(o.nzValue, v));
         if (option) {
           listOfCachedSelectedOption.push(option);
         }
       });
       this.listOfCachedSelectedOption = listOfCachedSelectedOption;
     }
-    console.log(this.listOfCachedSelectedOption);
   }
 
   updateListOfTagOption(): void {
     if (this.isTagsMode) {
-      const listOfMissValue = this.listOfSelectedValue.filter(
-        value => !this.listOfTemplateOption.find(o => this.compareWith(o.nzValue, value))
+      this.listOfTagOption = this.listOfCachedSelectedOption.filter(
+        comp => !this.listOfTemplateOption.find(o => this.compareWith(o.nzValue, comp.nzValue))
       );
-      this.listOfTagOption = listOfMissValue.map(value => {
-        const nzOptionComponent = new NzOptionComponent();
-        nzOptionComponent.nzValue = value;
-        nzOptionComponent.nzLabel = value;
-        return nzOptionComponent;
-      });
       this.listOfTagAndTemplateOption = [...this.listOfTemplateOption.concat(this.listOfTagOption)];
     } else {
       this.listOfTagAndTemplateOption = [...this.listOfTemplateOption];