fix(module: date-picker-view): add async data input support (#718)

NG-ZORRO · Jul 1, 2020 · f2748f0 · f2748f0
1 parent 364d368
commit f2748f0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/components/picker-view/picker-view.component.spec.ts b/components/picker-view/picker-view.component.spec.ts
@@ -38,6 +38,22 @@ describe('PickerViewComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should cols work', () => {
+    component.cols = 1;
+    component.seasons = [
+      {
+        label: '2013',
+        children: []
+      },
+      {
+        label: '2014',
+        children: []
+      }
+    ];
+    fixture.detectChanges();
+    expect(pickerEle.nativeElement.querySelector('.am-picker').children.length).toBe(1);
+  });
+
   it('should seasons work', () => {
     expect(pickerEle.nativeElement.querySelector('.am-picker').children.length).toBeGreaterThan(0, 'seasons has value');
   });
@@ -76,6 +92,7 @@ describe('PickerViewComponent', () => {
       [data]="seasons"
       [cascade]="cascade"
       [ngModel]="value"
+      [cols] = [cols]
       [itemStyle]="itemStyle"
       [indicatorStyle]="indicatorStyle"
       (ngModelChange)="onChange($event)"
@@ -86,6 +103,7 @@ export class TestPickerViewBasicComponent {
   cascade = false;
   itemStyle = { color: 'red' };
   indicatorStyle = { background: 'red' };
+  cols = 2;
   seasons = [
     {
       label: '2013',

diff --git a/components/picker-view/picker-view.component.ts b/components/picker-view/picker-view.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation, AfterViewInit, Input, EventEmitter, forwardRef } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, AfterViewInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
 import { PickerComponent } from '../picker/picker.component';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 @Component({
@@ -13,7 +13,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
     }
   ]
 })
-export class PickerViewComponent extends PickerComponent implements OnInit, AfterViewInit, ControlValueAccessor {
+export class PickerViewComponent extends PickerComponent implements OnInit, AfterViewInit, ControlValueAccessor, OnChanges {
   options;
   @Input()
   data: Array<any> = [];
@@ -45,6 +45,9 @@ export class PickerViewComponent extends PickerComponent implements OnInit, Afte
         this.selectedTarget.push({ targetId: `${index}`, currentY: 0 });
       }
     }
+    setTimeout(() => {
+      this.reloadPicker();
+    });
   }
 
   writeValue(value: any[]): void {
@@ -64,6 +67,15 @@ export class PickerViewComponent extends PickerComponent implements OnInit, Afte
     this.pickerViewInit();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.cols) {
+      this.dataForRender = [];
+    }
+    if (changes.data || changes.cols) {
+      this.pickerViewInit();
+    }
+  }
+
   ngAfterViewInit() {
     this.currentPicker = this.elementRef.nativeElement;
     this.reloadPicker();