在做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;
}),
);
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。