求解:获取数据后,渲染表单的categories,表现不符合预期

来源:8-5 本章实战上

苏子晨

2017-12-01

首先,我把创建categories复选框数组的业务抽象了出来:

private buildCategories(init?:boolean): Array<FormControl> {
  let formArray = [];
  this.categories.forEach(categorie => {
    // 判断是否需要初始化
    if (!init) {
        formArray.push(
            new FormControl(this.stock.categories.indexOf(categorie) != -1)
        )
    } else {
        formArray.push(
            new FormControl(false)
        )
    }
  });
  return formArray;
}

表单初始化时,复选框的设置:

categories: this.fb.array(
    this.buildCategories(true)
)

此时复选框全部为未选中,符合预期;

获取数据后reset表单时是这样设置的:

// 参数为获取到的数据
resetForm(stock:Stock) {
    this.stock = stock;
    this.form.reset({
        name: stock.name,
        code: stock.id,
        price: stock.price,
        categories: this.buildCategories(),
        desc: stock.desc
    });
}

正确结果是只有两项是选中的,然而结果变为了全部选中!

http://img.mukewang.com/szimg/5a211ec600014dbb06910068.jpg

这是怎么回事?


写回答

1回答

苏子晨

提问者

2017-12-01

解决了,没仔细看视频。

原来表单reset时复选框只需要传入数组就行了,不需要传入FormControl,

不太明白为什么

0
0

Angular4.0从入门到实战 打造股票管理网站

Angular新特性,教你熟练使用 Angular 和 Typescript 开发组件式单页应用

2683 学习 · 1361 问题

查看课程