feat(module:autocomplete): support bind any types to the nzModule of …

…trigger element (NG-ZORRO#1397) close NG-ZORRO#1298
hsuanxyz · May 24, 2018 · fc9d50d · fc9d50d
1 parent 46bd235
commit fc9d50d
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 6 deletions.
diff --git a/components/auto-complete/demo/certain-category.ts b/components/auto-complete/demo/certain-category.ts
@@ -19,7 +19,7 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@
               <a class="more-link" href="https://www.google.com/search?q=ng+zorro" target="_blank">更多</a>
             </span>
           </ng-template>
-          <nz-auto-option *ngFor="let option of group.children" [nzValue]="option.title">
+          <nz-auto-option *ngFor="let option of group.children" [nzLabel]="option.title" [nzValue]="option">
             {{option.title}}
             <span class="certain-search-item-count">{{option.count}} 人  关注</span>
           </nz-auto-option>
@@ -43,7 +43,7 @@ export class NzDemoAutoCompleteCertainCategoryComponent implements OnInit {
   inputValue: string;
   optionGroups: any[];
 
-  onChange(value: string): void {
+  onChange(value: any): void {
     console.log(value);
   }
 

diff --git a/components/auto-complete/doc/index.en-US.md b/components/auto-complete/doc/index.en-US.md
@@ -41,3 +41,10 @@ When there is a need for autocomplete functionality.
 | nzDefaultActiveFirstOption | Whether active first option by default | `boolean` | `true` |
 | nzWidth | Custom width, unit px | `number` | trigger element width |
 
+### nz-auto-option
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| nzValue | bind ngModel of the trigger element  | `any` | - |
+| nzLabel | display value of the trigger element  | `string` | - |
+| nzDisabled | disabled option | `boolean` | `false` |
diff --git a/components/auto-complete/doc/index.zh-CN.md b/components/auto-complete/doc/index.zh-CN.md
@@ -42,3 +42,10 @@ subtitle: 自动完成
 | nzDefaultActiveFirstOption | 是否默认高亮第一个选项。 | `boolean` | `true` |
 | nzWidth | 自定义宽度单位 px | `number` | 触发元素宽度 |
 
+### nz-auto-option
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| nzValue | 绑定到触发元素 ngModel 的值 | `any` | - |
+| nzLabel | 填入触发元素显示的值 | `string` | - |
+| nzDisabled | 禁用选项 | `boolean` | `false` |
diff --git a/components/auto-complete/nz-autocomplete-option.component.ts b/components/auto-complete/nz-autocomplete-option.component.ts
@@ -36,7 +36,8 @@ export class NzAutocompleteOptionComponent {
   active = false;
   selected = false;
 
-  @Input() nzValue: {};
+  /* tslint:disable-next-line:no-any */
+  @Input() nzValue: any;
   @Input() nzLabel: string;
 
   @Input()

diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts
@@ -265,8 +265,8 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   }
 
   private setValueAndClose(option: NzAutocompleteOptionComponent): void {
-    const value = option.getLabel();
-    this.setTriggerValue(value);
+    const value = option.nzValue;
+    this.setTriggerValue(option.getLabel());
     this._onChange(value);
     this._element.nativeElement.focus();
     this.closePanel();

diff --git a/components/auto-complete/nz-autocomplete.component.ts b/components/auto-complete/nz-autocomplete.component.ts
@@ -107,7 +107,7 @@ export class NzAutocompleteComponent implements AfterViewInit {
   @ViewChildren(NzAutocompleteOptionComponent) fromDataSourceOptions: QueryList<NzAutocompleteOptionComponent>;
 
   /** 自定义宽度单位 px */
-  @Input() nzWidth: number | void;
+  @Input() nzWidth: number;
 
   /** 是否默认高亮第一个选项，默认 `true` */
   @Input()