【Angular2】开发中的小问题

前端之家收集整理的这篇文章主要介绍了【Angular2】开发中的小问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

在Angular2开发的过程中遇到一些问题,现记录一下,避免重复同样的错误


ngOnChanges截听输入属性值的变化问题

在组件交互中,使用了ngOnchanges来监听传输到组件数据的微小变化
官网中使用的是两个变量,他们的变化可以很好监听出来,而我传输的是一个实体,每次改变的是实体里面的属性
但是第一次能监听到,后来就不行,换一个可以监听,在换回之前又可以监听了,在点击就又不可以了
后来分析了一下,不会监听对象的属性,而是在监听对象,只要对象不改变,就不会触发事件

所以解决方案就是在方法体内声明对象,这样每次生成的都是新的对象

//用户的答案(在方法内声明,每次提交为新答案实体,simplechange才会识别)
 let answer: Answer = new Answer;

CheckBox获取用户选项问题

需要获取用户的多项选择,并及时更新,在这里,对于多项选择的遍历获取答案需要记录一下

private options: Array<string> = [];//用户的答案选项(在方法外声明,否则本题刚选择答案会消失)
updateAnswer(el: Element,checked: boolean,value: string) {
    //获得用户的答案
    var index: number = this.options.indexOf(value);
    if (checked) {
      if (index < 0) {
        this.options.push(value);
      }
    } else {
      if (index > -1) {
        this.options = this.options.filter((ele,index) => {
          return ele != value;
        })
      }
    }
}

获得id后,无法根据此id获取相应的元素

从另一个组件传回一个id,需要根据这个id修改本组件内一个元素样式,达到联动效果。通过console控制台看到id确实返回且正确,但根据id就是找不到元素,例如:“121”
问题就是因为,返回实体后通过json转化,字符串前后加了引号,不是“121”,而是121

解决很简单,就是去掉引号
(这个错误有点类似有个程序员把名字叫做“null”这个字符串,联调的程序员就崩溃了,明明感觉没问题,怎么一直返回是null呢;刚开始一直以为引号是控制台加的用来方便看的)

let changedId = str.substring(1,str.length - 1);//去除首尾引号

小结

点滴积累,遇到问题,仔细分析

猜你在找的Angularjs相关文章