ng-alain下拉選擇異步數據，搜索異步數據及初始化默認選中數據

在作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;
        }),
      );
  }