fix(module:tree-select): update selected nodes when after set nodes

close NG-ZORRO#1934
hsuanxyz · Aug 8, 2018 · 3911974 · 3911974
1 parent 30498c8
commit 3911974
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 3 deletions.
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -77,6 +77,7 @@ import { NzTreeComponent } from '../tree/nz-tree.component';
 })
 export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
 
+  private nodes = [];
   isInit = false;
   isComposing = false;
   isDestroy = true;
@@ -107,7 +108,6 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   @Input() nzPlaceHolder = '';
   @Input() nzDropdownStyle: { [ key: string ]: string; };
   @Input() nzDefaultExpandedKeys: string[] = [];
-  @Input() nzNodes: NzTreeNode[] = [];
   @Input() nzDisplayWith: (node: NzTreeNode) => string = (node: NzTreeNode) => node.title;
   @Output() nzOpenChange = new EventEmitter<boolean>();
   @Output() nzCleared = new EventEmitter<void>();
@@ -116,6 +116,18 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   @Output() nzTreeClick = new EventEmitter<NzFormatEmitEvent>();
   @Output() nzTreeCheckBoxChange = new EventEmitter<NzFormatEmitEvent>();
 
+  @Input()
+  set nzNodes(value: NzTreeNode[]) {
+    this.nodes = value;
+    if (this.isInit) {
+      setTimeout(() => this.updateSelectedNodes(), 0);
+    }
+  }
+
+  get nzNodes(): NzTreeNode[] {
+    return this.nodes;
+  }
+
   @ViewChild('inputElement') inputElement: ElementRef;
   @ViewChild('treeSelect') treeSelect: ElementRef;
   @ViewChild('dropdownTemplate', { read: TemplateRef }) dropdownTemplate;

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -22,7 +22,7 @@ describe('tree-select component', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTreeSelectModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule ],
-      declarations: [ NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent ]
+      declarations: [ NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent, NzTestTreeSelectAsyncNodesComponent ]
     });
     TestBed.compileComponents();
     inject([ OverlayContainer ], (oc: OverlayContainer) => {
@@ -249,7 +249,7 @@ describe('tree-select component', () => {
 
     it('should set null value work', fakeAsync(() => {
       fixture.detectChanges();
-      expect(testComponent.value[0]).toBe('1000122');
+      expect(testComponent.value[ 0 ]).toBe('1000122');
       treeSelectComponent.updateSelectedNodes();
       fixture.detectChanges();
       testComponent.setNull();
@@ -334,6 +334,38 @@ describe('tree-select component', () => {
     }));
   });
 
+  describe('async nodes', () => {
+    let fixture;
+    let testComponent;
+    let treeSelect;
+    let treeSelectComponent: NzTreeSelectComponent;
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(NzTestTreeSelectAsyncNodesComponent);
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+      treeSelect = fixture.debugElement.query(By.directive(NzTreeSelectComponent));
+      treeSelectComponent = treeSelect.componentInstance;
+      fixture.detectChanges();
+      flush();
+      tick(200);
+      fixture.detectChanges();
+    }));
+    it('should update selected nodes after load nodes', fakeAsync(() => {
+      treeSelectComponent.updateSelectedNodes();
+      fixture.detectChanges();
+      expect(treeSelectComponent.selectedNodes.length).toBe(0);
+      testComponent.loadNodes();
+      tick(200);
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      treeSelectComponent.updateSelectedNodes();
+      fixture.detectChanges();
+      expect(treeSelectComponent.selectedNodes.length).toBe(1);
+    }));
+
+  });
+
 });
 
 @Component({
@@ -557,3 +589,82 @@ export class NzTestTreeSelectFormComponent {
     this.formGroup.get('select').reset(null);
   }
 }
+
+@Component({
+  selector: 'nz-test-tree-select-async-nodes',
+  template: `
+    <nz-tree-select
+      [nzNodes]="nodes"
+      [(ngModel)]="value">
+    </nz-tree-select>
+  `
+})
+
+export class NzTestTreeSelectAsyncNodesComponent {
+  value: string = '10001';
+  nodes = [];
+
+  loadNodes(): void {
+    setTimeout(() => {
+      this.nodes = [
+        new NzTreeNode({
+          title   : 'root1',
+          key     : '1001',
+          children: [
+            {
+              title   : 'child1',
+              key     : '10001',
+              children: [
+                {
+                  title   : 'child1.1',
+                  key     : '100011',
+                  children: []
+                },
+                {
+                  title   : 'child1.2',
+                  key     : '100012',
+                  children: [
+                    {
+                      title   : 'grandchild1.2.1',
+                      key     : '1000121',
+                      isLeaf  : true,
+                      disabled: true
+                    },
+                    {
+                      title : 'grandchild1.2.2',
+                      key   : '1000122',
+                      isLeaf: true
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }),
+        new NzTreeNode({
+          title   : 'root2',
+          key     : '1002',
+          children: [
+            {
+              title          : 'child2.1',
+              key            : '10021',
+              children       : [],
+              disableCheckbox: true
+            },
+            {
+              title   : 'child2.2',
+              key     : '10022',
+              children: [
+                {
+                  title : 'grandchild2.2.1',
+                  key   : '100221',
+                  isLeaf: true
+                }
+              ]
+            }
+          ]
+        })
+      ];
+    });
+  }
+}