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