ng-alain下拉选择异步数据,搜索异步数据及初始化默认选中数据

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

场景

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

你可能感兴趣的:(+Angular)