ngalain下拉选择异步数据搜索异步数据及初始化默认选中数据

在做 CURD 时使用 ng-alain 的SF，实现业务功能是相当的快。但是在做一些复杂或者相对复杂的需求时，官方所提供的示例也不一定会有，因此需要自己动手研究及解决。

场景

ng-alain 7.2.0
新增界面：SF组件使用 select 小部件下拉里显示懒加载一部分数据 (因为数据量大，因此只加载 100)，搜索时也使用懒加载数据
编辑界面：SF组件使用 select 小部件实始化默认选中的数据，选中的数据有可能不存在懒加载一部分数据。

实现

方案:
asyncData懒加载数据，并且初始化时插入所需要的数据项，提供默认选中项
onSearch 进行搜索异步数据。
代码来自 项目中的代码片段

ui: SFUISchema = {
    $repoId: {
      widget: 'select',
      placeholder: '请选择',
      allowClear: true,
      serverSearch: true,
      // 懒加载数据，利用管道，插入数据项
      // 如果是编辑状态 addSelectOption 方法进行判断，插入已选中数据项。// 方法 getRepositoryOfOptionData 返回的是 observable
      asyncData: () => this.shareDataService.getRepositoryOfOptionData().pipe(map((value: any) => {return this.addSelectOption(value);
        }
      )),
      // 搜索时进行懒加载
      onSearch: (keyword: string) => this.shareDataService.getRepositoryOfOptionData(keyword).toPromise(),},
    // ...
}

/**
 * 业务逻辑，判断编辑状态下，是否需要插入已选中数据
 * 插入一条下拉选项数据
 * @param optionList 下拉数据
 */
addSelectOption(optionList: any[]) {const option = {};
  if (true) { // 加上你的判断条件
    option['label'] = '下拉项文字'; // 
    option['value'] = '下拉项的值'; // 

    // 判断数据是否已存在
    const isExist = optionList.some((item) => {return item.value == option['value'];
    });
    if (!isExist) {optionList.push(option);
    }
  }
  // 返回所有数据项
  return optionList;
}

shareDataService

/**
   * 方法作用的注释
   * 并转换成 select 数据结构
   * @param keyword 收发室名称
   */
  getRepositoryOfOptionData(keyword?: string): Observable<string[]> {const page = { page: 0, size: 100};
    let queryParams = page;
    if (keyword) {queryParams = { ...page, ...{ repoName: keyword} };
    }
    return this.http
      .get(`/repository/findAll`, queryParams)
      .pipe(map((resp: any) => {const arr = [];
          const list = resp.data.content;
          if (list && list.length) {
            list.forEach(element => {arr.push({ label: element.name, value: element.id});
            });
          }
          return arr;
        }),
      );
  }