angular常见报错（持续更新）

service

持续更新中…敬请关注

cant resolve all parameters

在报错组件(被注入服务的组件)的构造函数中，在参数前加入@Inject前缀，代码如下

constructor(@Inject(forwardRef(() => MobileService)) public ms: MobileService) {
    console.log(ms);
}

为此需引入

import { Inject,forwardRef } from '@angular/core'

在某技术论坛看到，问题似乎出自于某种循环依赖，具体原因不明，但是现在，服务可以运行了

ts/js

持续更新中…敬请关注

statements must be filtered with an if statement (forin)

使用 for…in会遍历对象上的所有的属性，包括原型链上的可枚举属性，该警告的目的是希望过滤出想遍历的属性，而不是所有属性

使用Object.keys()对所有遍历的对象的key进行提取，并使用for…of遍历提取的keys数组。

for (const i of Object.keys(form.controls)) 

Cannot find a differ supporting object ‘[object Object]’ of type ‘object’

似乎是个常见的错误，经查询可出现于多种场景。

本次错误出现的场景为相关变量的异步赋值后，也算是一种经典场景。

错误的出现有三个阶段：

1. 有报错，页面显示不正常

   变量未正确更新，将一个异步结果直接赋值给变量时出现

   解决办法：可在变量后加async管道，此管道可等待异步执行完毕后将结果赋值，或根据具体情况赋值，如observe的返回类型通过subscribt赋值，promise通过then赋值等

2. 有报错，页面显示正常

   最终成功赋值，但在异步执行过程中出现了‘薛定谔的变量’，目前猜想时，异步将赋值的过程拉长了，而在此过程中该变量的值为 ？ ，而*ngFor只能遍历数组，所以出现了报错

   解决办法：

   *ngFor="let obj of Arr.length?Arr:[]"
   

   注：尽管对于异步的处理有多种方式，对于新手来说，还是尽量避免异步的多层嵌套

unexpected end of json input

意料之外的输入。

本次报错出现于一个需要传入JSON字符串的场景，而初始值为 “ ”，为非JSON字符串，后对该字符串进行JSON.parse()解析时报错，将字符串初始值改为符合JSON格式的值，如 “[]”,后运行正常。

ng zorro

持续更新中…敬请关注

使用npm下载失败

使用cnpm下载

样式显示不全

检查angular版本是否过高，zorro官方文档首页标明了支持的版本与最新版本，往往是不一致的

Unexpected module ‘…’ declared by the module ‘AppModule’

出现于引入所需的样式模块之后

根据报错分析，是引入无效引发的错误，检查后发现

引入的是样式模块而非组件，所以不应该被’declare’,而是该被’imports’;换一下位置就好了

nztable

表头表体不对齐

最新的版本中似乎已经更新了这个问题，老版本可以通过在th/td中设置nz-width来校正，该解决方案出自8.0版本的文档。

常见于固定表头/添加了表体滚动后。

<th nzWidth="150px">Name</th>

日期选择框

missing locale data for the locale zh-cn

nz-date-picker 的部分 locale 来自于 Angular 自身的国际化支持，需要在 main.ts文件中 引入相应的 Angular 语言包。

app.module.ts

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

下拉框(select选择框)触发无效

下拉框点击下拉无效。

本人环境为8.0.0版本，在select中使用*ngFor遍历的option时产生点击下拉无效现象。

解决办法：在select下拉框前添加一个无用的表单控件。

<input type="text" style="display:none">

下拉框即可正常使用(原因不明)。

属性

持续更新中…敬请关注

nzTitle

不允许放置

在前面添加 nz-tooltip

cant bind to nzTitle since it isnt a known property of

在modulejs中引入

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

unexpected value undefined imported by the module appmodule

imported出错。检查刚刚引入后，添加在imported数组中的值格式是否有误，错误包括变量名称及多余的逗号等

持续更新中…敬请关注