Angular2 事件绑定注意

1
2
3
<select [(ngModel)]="value" (change)="onSelect(value)">
...
</select>
1
2
3
onSelect(value) {
// value 还是原来的值,没来得及改变
}

解决办法

1
2
3
4
5
onSelect(value) {
setTimeout(() => {
// value 绑定完成后的值
});
}

console.log 或者说Chrome DevTools的坑

考虑下面的代码:

1
2
3
4
5
6
7
8
let obj = {a: []}, n = 100;
while(n--) {
obj.a.push(n);
}
console.log(obj); // obj.a[50]: -100

obj.a[50] = -100;
console.log(obj); // obj.a[50]: -100

浏览器里可以发现两次输出的结果中 a[50] 都是 -100。这一点如果第一次遇到的话还真是匪夷所思。

这里我故意把 a 数组的元素弄得很多,使 DevTools折叠 方式显示:

Object {a: Array[100]}
Object {a: Array[100]}

看似友好的显示方式,实际上里面有很大的问题。

当我们展开第一个输出时, DevTools及时 读取变量值,由于这是个 引用 类型,实际上它读到的是 obj 的最终值,及 a[50]-100

如果数组a只有很少的元素,DevTools 不启用智能显示时就不会出现这个问题。

也就是说,console.logDevTools 里的实际上是引用而不是拷贝展开操作会及时读取变量值。

如果把上面例子的两个输出改成:

1
console.log(JSON.stringify(obj));

结果将和预期的一致。

因此,在浏览器中调试 js 程序应该以 调试器 下断点为主,日志为辅。

0%