feat(module:cascader): support for load options with observable (#8048)

Author: HyperLife1119

components/cascader/cascader.component.ts

@@ -275,7 +275,7 @@ export class NzCascaderComponent
 
   @Input() nzTriggerAction: NzCascaderTriggerType | NzCascaderTriggerType[] = ['click'] as NzCascaderTriggerType[];
   @Input() nzChangeOn?: (option: NzCascaderOption, level: number) => boolean;
-  @Input() nzLoadData?: (node: NzCascaderOption, index: number) => PromiseLike<NzSafeAny>;
+  @Input() nzLoadData?: (node: NzCascaderOption, index: number) => PromiseLike<NzSafeAny> | Observable<NzSafeAny>;
   // TODO: RTL
   @Input() nzSuffixIcon: string | TemplateRef<void> = 'down';
   @Input() nzExpandIcon: string | TemplateRef<void> = '';

components/cascader/cascader.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { Injectable, OnDestroy } from '@angular/core';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { BehaviorSubject, finalize, from, Subject } from 'rxjs';
 
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { arraysEqual, isNotNil } from 'ng-zorro-antd/core/util';
@@ -401,27 +401,26 @@ export class NzCascaderService implements OnDestroy {
         option.loading = true;
       }
 
-      loadFn(option, columnIndex).then(
-        () => {
-          option.loading = false;
-          if (option.children) {
-            this.setColumnData(option.children, columnIndex + 1, option);
+      from(loadFn(option, columnIndex))
+        .pipe(
+          finalize(() => {
+            option.loading = false;
+            this.$loading.next(false);
+            this.$redraw.next();
+          })
+        )
+        .subscribe({
+          next: () => {
+            if (option.children) {
+              this.setColumnData(option.children, columnIndex + 1, option);
+            }
+            success?.();
+          },
+          error: () => {
+            option.isLeaf = true;
+            failure?.();
           }
-          if (success) {
-            success();
-          }
-          this.$loading.next(false);
-          this.$redraw.next();
-        },
-        () => {
-          option.loading = false;
-          option.isLeaf = true;
-          if (failure) {
-            failure();
-          }
-          this.$redraw.next();
-        }
-      );
+        });
     }
   }
 

components/cascader/doc/index.en-US.md

@@ -39,7 +39,7 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 | `[nzExpandTrigger]`   | expand current item when clicked or hovered, one of 'click' 'hover'                                                                    | `'click'\|'hover'`                                            | `'click'`         |
 | `[nzLabelProperty]`   | the label property name of options                                                                                                     | `string`                                                      | `'label'`         |
 | `[nzLabelRender]`     | render template of displaying selected options                                                                                         | `TemplateRef<any>`                                            | -                 |
-| `[nzLoadData]`        | to load option lazily. Lazy load will be called immediately if the setting is `ngModel` with an array value and `nzOptions` is not set | `(option: any, index?: index) => PromiseLike<any>`            | -                 |
+| `[nzLoadData]`        | to load option lazily. Lazy load will be called immediately if the setting is `ngModel` with an array value and `nzOptions` is not set | `(option: any, index?: index) => PromiseLike<any> \| Observable<any>`            | -                 |
 | `[nzMenuClassName]`   | additional className of popup overlay                                                                                                  | `string`                                                      | -                 |
 | `[nzMenuStyle]`       | additional css style of popup overlay                                                                                                  | `object`                                                      | -                 |
 | `[nzNotFoundContent]` | specify content to show when no result matches                                                                                         | `string\|TemplateRef<void>`                                   | -                 |

components/cascader/doc/index.zh-CN.md

@@ -40,7 +40,7 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 | `[nzExpandTrigger]` | 次级菜单的展开方式，可选 'click' 和 'hover' | `'click'\|'hover'` | `'click'` |
 | `[nzLabelProperty]` | 选项的显示值的属性名 | `string` | `'label'` |
 | `[nzLabelRender]` | 选择后展示的渲染模板 | `TemplateRef<any>` | - |
-| `[nzLoadData]` | 用于动态加载选项。如果提供了`ngModel`初始值，且未提供`nzOptions`值，则会立即触发动态加载。 | `(option: any, index?: index) => PromiseLike<any>` | - |
+| `[nzLoadData]` | 用于动态加载选项。如果提供了`ngModel`初始值，且未提供`nzOptions`值，则会立即触发动态加载。 | `(option: any, index?: index) => PromiseLike<any> \| Observable<any>` | - |
 | `[nzMenuClassName]` | 自定义浮层类名 | `string` | - |
 | `[nzMenuStyle]` | 自定义浮层样式 | `object` | - |
 | `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string\|TemplateRef<void>` | - |

components/cascader/typings.ts

@@ -3,6 +3,8 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { Observable } from 'rxjs';
+
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 export type NzCascaderExpandTrigger = 'click' | 'hover';
@@ -51,5 +53,5 @@ export interface NzCascaderComponentAsSource {
 
   nzChangeOn?(option: NzCascaderOption, level: number): boolean;
 
-  nzLoadData?(node: NzCascaderOption, index: number): PromiseLike<NzSafeAny>;
+  nzLoadData?(node: NzCascaderOption, index: number): PromiseLike<NzSafeAny> | Observable<NzSafeAny>;
 }