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

最新推荐文章于 2022-10-18 15:56:35 发布

weixin_30710457

最新推荐文章于 2022-10-18 15:56:35 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zhang-jin/p/10411395.html

本文涵盖前端开发中常见的技术问题，包括JSON遍历、Angular路由配置、时间戳获取、页面性能优化、JavaScript函数理解及代码规范。通过具体实例解析，帮助开发者掌握前端开发的关键技能。

目录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外面增加一个类名。

转载于:https://www.cnblogs.com/Zhang-jin/p/10411395.html