fix(module:cascader): invalid value and label when binding dynamically (#9338)

Author: WwwHhhYran

components/cascader/cascader.component.ts

@@ -319,6 +319,7 @@ export class NzCascaderComponent
   @ViewChild(CdkConnectedOverlay, { static: false }) overlay!: CdkConnectedOverlay;
   @ViewChildren(NzCascaderOptionComponent) cascaderItems!: QueryList<NzCascaderOptionComponent>;
 
+  @Input() nzOptions: NzCascaderOption[] | null = [];
   @Input() nzOptionRender: TemplateRef<{ $implicit: NzCascaderOption; index: number }> | null = null;
   @Input({ transform: booleanAttribute }) nzShowInput = true;
   @Input({ transform: booleanAttribute }) nzShowArrow = true;
@@ -364,23 +365,6 @@ export class NzCascaderComponent
   @Input() nzSuffixIcon: string | TemplateRef<void> = 'down';
   @Input() nzExpandIcon: string | TemplateRef<void> = '';
 
-  @Input()
-  get nzOptions(): NzCascaderOption[] | null {
-    return this.cascaderService.nzOptions;
-  }
-
-  set nzOptions(options: NzCascaderOption[] | null) {
-    const nodes = this.coerceTreeNodes(options || []);
-    this.treeService.initTree(nodes);
-    this.cascaderService.columns = [nodes];
-    this.updateSelectedNodes(true);
-
-    if (this.inSearchingMode) {
-      this.cascaderService.setSearchingMode(this.inSearchingMode);
-      this.cascaderService.prepareSearchOptions(this.inputValue);
-    }
-  }
-
   get treeService(): NzCascaderTreeService {
     return this.nzTreeService as NzCascaderTreeService;
   }
@@ -569,7 +553,10 @@ export class NzCascaderComponent
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzStatus, nzSize, nzPlacement } = changes;
+    const { nzStatus, nzSize, nzPlacement, nzOptions } = changes;
+    if (nzOptions) {
+      this.updateOptions();
+    }
     if (nzStatus) {
       this.setStatusStyles(this.nzStatus, this.hasFeedback);
     }
@@ -966,6 +953,18 @@ export class NzCascaderComponent
     this.dropdownPosition = placement as NzSelectPlacementType;
   }
 
+  private updateOptions(): void {
+    const nodes = this.coerceTreeNodes(this.nzOptions || []);
+    this.treeService.initTree(nodes);
+    this.cascaderService.setColumnData(nodes, 0);
+    this.updateSelectedNodes(true);
+
+    if (this.inSearchingMode) {
+      this.cascaderService.setSearchingMode(this.inSearchingMode);
+      this.cascaderService.prepareSearchOptions(this.inputValue);
+    }
+  }
+
   private isActionTrigger(action: 'click' | 'hover'): boolean {
     return typeof this.nzTriggerAction === 'string'
       ? this.nzTriggerAction === action

components/cascader/cascader.spec.ts

@@ -1494,7 +1494,7 @@ describe('cascader', () => {
       fixture.detectChanges();
       const itemEl1 = getItemAtColumnAndRow(1, 1)!;
       expect(testComponent.cascader.inSearchingMode).toBe(true);
-      expect(itemEl1.innerText).toBe('Zhejiang / Hangzhou / West Lake');
+      expect(itemEl1.innerText).toBe('Zhejiang New / Hangzhou New / West Lake New');
 
       itemEl1.click();
       fixture.detectChanges();
@@ -1506,6 +1506,29 @@ describe('cascader', () => {
       expect(testComponent.values!.join(',')).toBe('zhejiang,hangzhou,xihu');
     }));
 
+    it('should support nzValueProperty', fakeAsync(() => {
+      testComponent.nzShowSearch = true;
+      testComponent.nzValueProperty = 'v';
+      fixture.detectChanges();
+      cascader.nativeElement.click();
+      fixture.detectChanges();
+      testComponent.cascader.inputValue = 'o';
+      testComponent.cascader.setMenuVisible(true);
+      fixture.detectChanges();
+      const itemEl1 = getItemAtColumnAndRow(1, 1)!;
+      expect(testComponent.cascader.inSearchingMode).toBe(true);
+      expect(itemEl1.innerText).toBe('Zhejiang / Hangzhou / West Lake');
+
+      itemEl1.click();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(testComponent.cascader.inSearchingMode).toBe(false);
+      expect(testComponent.cascader.menuVisible).toBe(false);
+      expect(testComponent.cascader.inputValue).toBe('');
+      expect(testComponent.values!.join(',')).toBe('zhejiang-new,hangzhou-new,xihu-new');
+    }));
+
     it('should support custom filter', fakeAsync(() => {
       testComponent.nzShowSearch = {
         filter(inputValue: string, path: NzCascaderOption[]): boolean {
@@ -2215,43 +2238,50 @@ const options1: NzCascaderOption[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
-    l: 'Zhejiang',
+    v: 'zhejiang-new',
+    l: 'Zhejiang New',
     children: [
       {
         value: 'hangzhou',
         label: 'Hangzhou',
-        l: 'Hangzhou',
+        v: 'hangzhou-new',
+        l: 'Hangzhou New',
         children: [
           {
             value: 'xihu',
-            l: 'West Lake',
             label: 'West Lake',
+            v: 'xihu-new',
+            l: 'West Lake New',
             isLeaf: true
           }
         ]
       },
       {
         value: 'ningbo',
         label: 'Ningbo',
-        l: 'Ningbo',
+        v: 'ningbo-new',
+        l: 'Ningbo New',
         isLeaf: true
       }
     ]
   },
   {
     value: 'jiangsu',
     label: 'Jiangsu',
-    l: 'Jiangsu',
+    v: 'jiangsu-new',
+    l: 'Jiangsu New',
     children: [
       {
         value: 'nanjing',
         label: 'Nanjing',
-        l: 'Nanjing',
+        v: 'nanjing-new',
+        l: 'Nanjing New',
         children: [
           {
             value: 'zhonghuamen',
             label: 'Zhong Hua Men',
-            l: 'Zhong Hua Men',
+            v: 'zhonghuamen-new',
+            l: 'Zhong Hua Men New',
             isLeaf: true
           }
         ]
@@ -2407,6 +2437,7 @@ const options5: NzSafeAny[] = [];
   template: `
     <nz-cascader
       [(ngModel)]="values"
+      [nzOptions]="nzOptions"
       [nzAllowClear]="nzAllowClear"
       [nzAutoFocus]="nzAutoFocus"
       [nzChangeOn]="nzChangeOn"
@@ -2416,20 +2447,19 @@ const options5: NzSafeAny[] = [];
       [nzExpandIcon]="nzExpandIcon"
       [nzExpandTrigger]="nzExpandTrigger"
       [nzLabelProperty]="nzLabelProperty"
+      [nzValueProperty]="nzValueProperty"
       [nzLabelRender]="nzLabelRender"
       [nzMenuClassName]="nzMenuClassName"
       [nzMenuStyle]="nzMenuStyle"
       [nzMouseEnterDelay]="nzMouseEnterDelay"
       [nzMouseLeaveDelay]="nzMouseLeaveDelay"
-      [nzOptions]="nzOptions"
       [nzPlaceHolder]="nzPlaceHolder"
       [nzShowArrow]="nzShowArrow"
       [nzShowInput]="nzShowInput"
       [nzShowSearch]="nzShowSearch"
       [nzSize]="nzSize"
       [nzTriggerAction]="nzTriggerAction"
       [nzSuffixIcon]="nzSuffixIcon"
-      [nzValueProperty]="nzValueProperty"
       [nzBackdrop]="nzBackdrop"
       [nzPlacement]="nzPlacement"
       [nzVariant]="nzVariant"
@@ -2488,7 +2518,6 @@ export class NzDemoCascaderDefaultComponent {
   imports: [FormsModule, NzCascaderModule],
   template: `
     <nz-cascader
-      [nzOptions]="nzOptions"
       [(ngModel)]="values"
       [nzLoadData]="nzLoadData"
       (ngModelChange)="onValueChanges($event)"
@@ -2499,7 +2528,6 @@ export class NzDemoCascaderDefaultComponent {
 export class NzDemoCascaderLoadDataComponent {
   @ViewChild(NzCascaderComponent, { static: true }) cascader!: NzCascaderComponent;
 
-  nzOptions: NzSafeAny[] | null = null;
   values: string[] | null = null;
 
   nzLoadData = (node: NzSafeAny, index: number): PromiseLike<NzSafeAny> => {