perf(module: picker-view): perf docs and demo (#189)

NG-ZORRO · Dec 25, 2018 · fc9627d · fc9627d
1 parent 500c893
commit fc9627d
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 26 deletions.
diff --git a/components/picker-view/demo/basic.ts b/components/picker-view/demo/basic.ts
@@ -3,16 +3,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'demo-picker-view-basic',
   template: `
+    <div>{{getValue(value)}}</div>
     <PickerView [data]="seasons"
                 [cascade]="false"
-                [ngModel]="value"
+                [(ngModel)]="value"
                 (ngModelChange)="onChange($event)"
     ></PickerView>
-    <PickerView [data]="seasons"
-                [cascade]="false"
-                [ngModel]="value2"
-                (ngModelChange)="onChange2($event)"
-    ></PickerView>
   `
 })
 export class DemoPickerViewBasicComponent {
@@ -42,15 +38,10 @@ export class DemoPickerViewBasicComponent {
       ]
     }
   ];
-  value = [];
-  value2 = [];
+  value = ['2014', '夏'];
 
   onChange(result) {
-    this.value = this.getValue(result);
-  }
-
-  onChange2(result) {
-    this.value2 = this.getValue(result);
+    console.log(this.value, result);
   }
 
   getValue(result) {

diff --git a/components/picker-view/doc/index.en-US.md b/components/picker-view/doc/index.en-US.md
@@ -11,10 +11,10 @@ PickerView's functions like Picker, but it is rendered directly in the area inst
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
 | data    | data source       | `Array<{value, label}>` / `Array<Array<{value, label}>>` |   -  |
-| value   | the value, the format is `[value1, value2, value3]`, corresponds to the level value of the data source   | Array  | - |
+| ngModel   | the value, the format is `[value1, value2, value3]`, corresponds to the level value of the data source   | Array  | - |
 | cascade    | whether cascade        | Boolean |  true  |
 | cols    | col numbers   | Number |  `3`  |
-| onChange | selected callback function | (val): void | - |
+| ngModelChange | selected callback function | (val): void | - |
 | cascade  | whether is cascade mode | Boolean | true |
 | itemStyle | style to apply to each of the item labels  |   Object   | -  |
 | indicatorStyle  | style of indicator | Object | - |
diff --git a/components/picker-view/picker-view.component.spec.ts b/components/picker-view/picker-view.component.spec.ts
@@ -79,12 +79,6 @@ describe('PickerViewComponent', () => {
                 [indicatorStyle]="indicatorStyle"
                 (ngModelChange)="onChange($event)"
     ></PickerView>
-
-    <PickerView [data]="seasons"
-                [cascade]="false"
-                [ngModel]="value2"
-                (ngModelChange)="onChange2($event)"
-    ></PickerView>
   `
 })
 export class TestPickerViewBasicComponent {

diff --git a/components/picker-view/picker-view.component.ts b/components/picker-view/picker-view.component.ts
@@ -18,8 +18,6 @@ export class PickerViewComponent extends PickerComponent implements OnInit, Afte
   @Input()
   data: Array<any> = [];
   @Input()
-  value: Array<any> = [];
-  @Input()
   cols: number = 3;
   @Input()
   cascade: boolean;
@@ -30,15 +28,15 @@ export class PickerViewComponent extends PickerComponent implements OnInit, Afte
 
   pickerViewInit() {
     this.options.data = this.data;
-    this.options.value = this.value;
     this.options.cols = this.cols;
     this.options.cascade = this.cascade;
     this.init();
   }
 
   writeValue(value: any[]): void {
     if (value) {
-      this.value = value;
+      this.options.value = value;
+      this.init();
     }
   }
 

diff --git a/components/picker-view/picker-view.module.ts b/components/picker-view/picker-view.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { PickerViewComponent } from './picker-view.component';
 import { PickerModule } from '../picker/picker.module';
 import { LocaleProviderModule } from '../locale-provider/locale-provider.module';
 @NgModule({
   imports: [
+    FormsModule,
     CommonModule,
     PickerModule,
     LocaleProviderModule

diff --git a/components/picker/picker.component.ts b/components/picker/picker.component.ts
@@ -41,7 +41,6 @@ export class PickerComponent implements OnInit, AfterViewInit, OnDestroy {
   isMouseDown: boolean = false;
   Velocity = velocity.getVelocity();
   currentPicker: any;
-  onChange = (_: any[]) => { };
 
   private _unsubscribe$: Subject<void> = new Subject<void>();
 
@@ -143,6 +142,8 @@ export class PickerComponent implements OnInit, AfterViewInit, OnDestroy {
   constructor(public elementRef: ElementRef, public options: PickerOptions, private _localeProviderService: LocaleProviderService) {
   }
 
+  onChange = (_: any[]) => { };
+
   init() {
     if (this.options.data.length > 0) {
       this.address = this.options.data;