（前端）angular报错日常以及记录日常

目录1

json的key...value问题

遍历json的key...value的时候报错：

[tslint] for (... in ...) statements must be filtered with an if statement

　　原代码：

for (let key in this.targetList[0]) {

    this.tableHeaders.push({ value: key, name: key })

}

　　修改为：

for (const key in Object.keys(this.targetList[0]) {

　　if (this.targetList[0].hasOwnProperty(key)) { // 添加原型判断

      this.tableHeaders.push({ value: key, name: key })

　　}

}

for...in 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性，例如 String 的 indexOf() 方法或 Object的toString()方法。

如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性

目录2

报错：routerLink

Can't bind to 'routerLink' since it isn't a known property of 'a'.

　　do：

　　　　注意是否在该模块引入import {RouterModule} from '@angular/router'

目录3

获取当前时间的时间戳

      13位（单位毫秒）： const time = new Date

      转换成10位： const  time = Math.round((new Date()).valueOf() / 1000)

目录4

页面卡顿，性能问题

　　原因分析：（电脑性能，网速问题，客观存在原因，与代码逻辑无关。）

          打开的页面存在很多请求，有的请求未响应或响应不及时。

          线程阻塞，前端存在大量运算或者渲染页面的过程。

          DOM操作频繁，频繁触发回流，循环耗时等;

  　具体分析：F12打开控制台，点击performance,选中screenshots,点击录制屏幕，操作。

          红色部分表示该部分卡顿；

          底部summary图，黄色代表的部分需要优化。

目录5

网红面试题

　　console.log(['1','2','3'].map(parseInt))

　　答案：[1, NaN, NaN]

　　解析：https://juejin.im/post/5c6fab02e51d453eb7801914

　　　　简单来说，就是map回调函数中有三个参数，第一个是正在处理的当前元素，第二个是当前索引；

　　　　而parseInt函数其实也有两个参数parseInt(string, radix)

　　　　上题实际是被解析成这样：

　　　　　　parseInt('1', 0, theArray)

　　　　　　parseInt('2', 1, theArray)

　　　　　　parseInt('3', 2, theArray)

　　　方法：

　　　　const arr = ['1', '2', '3'].map(item => {

      　　return parseInt(item)

    　　})

　　　报错：

　　　　parseInt(item)报红，显示：Missing radix parameter

　　　　为啥呀？

　　　　　　　关于parseInt语法：第二个参数redix实际上有四种值，2，8， 10， 16；【分别对应二进制，八进制，十进制，十六进制；默认十进制】

　　　　　　　一般情况下可忽略第二个参数，可以运行。

　　　　　　　可是在进行语法校验的时候，jsLint会报错，因为压缩工具对语法的严谨性要求比较高；这种情况下建议加上第二个参数；

目录6
（写给自己的记录）
angular在使用弹框的时候，用的是angular Material组件，需要修改弹框原本的样式；
可以使用panelClass.

在原本的dialog外面增加一个类名。