[Angular] 关于ng-alain中st的多选框

本来高高兴兴，单选咱就用radio，多选用checkbox。选中数据，点击保存

多好，看，没有人受伤的世界完成了。

但是有一个问题，当数据多起来，表格就会分页，但是多选框选中的始终的是本页的数据。

也就是说假如在第一页选中三条数据后，点击到第二页选中一条数据，再点击保存，只会保存第二页中的一条数据。

那简单啊，把之前选中的拿个数组装起来不就好了。

那切换页面后，之前页面选中的数据怎么让它保持选中状态呢？

简单啊，操作绑定数据源的dataList，让元素的属性checked等于true不就好了。

好嘛，听起来好像很简单，但是要知道checkbox返回的不是一条数据，而是当前页面所选中元素的一个数组。我整了半天，没搞清楚逻辑，把自己整晕了。

我太菜了，那就到了方向转换的时候了。

换个思路，还是操作dataList的check，我换成radio，这样不就好了。但是这里的radio选中后就不能再点了，也就是取消不了了。

好嘛，那就邪道一点，把type改成yn，change的时候监听click不就好了。

这就是我这个菜鸟给出来的解决方案。

那么上代码吧。

dataList: any = [];
itemChecked: any = [];
paramId: string;

// st
@ViewChild('st', { static: false }) st: STComponent;
columns: STColumn[] = [
    { title: '', index: 'checked', type: 'yn' },
    ...
    }
]

// 给dataList初始化一下
ngOnInit(): void {
    this.http.post(`/findAll`).subscribe(res => {
        this.dataList = res;
        this.http.post(`另外一张表的url`, paramId)
            .subscribe((res: any) => {
            this.dataList.forEach(e => {
                res.forEach(resp => {
                    if (e.id === resp.cid) {
                        this.itemChecked.push(e);
                        e.checked = true;
                    }
                });
            });
            this.st.reload();
        });
    });
}

// st的change事件
change(item) {
    if (item.type === "click") {
        const id = item.click.item.id;
        const idx = this.itemChecked.findIndex(i => i.id === id);
        if (idx === -1) {
            this.itemChecked.push({ id: id });
            const tmp = this.dataList.find(i => i.id === id);
            tmp.checked = true;
        }
        else {
            this.itemChecked.splice(idx, 1);
            const tmp = this.dataList.find(i => i.id === id);
            tmp.checked = false;
        }
        this.st.reload();
    }
}

// 保存
save(value: any) {
    const list = [];
    this.dataList.forEach(e => {
        if (e.checked) {
            list.push(e.id);
        }
    })
    value.list = list;
    this.http.post(`/save`, value).subscribe(res => {
        this.msgSrv.success('保存成功');
        this.modal.close(true);
    });
}

效果：