angular7常见错误及解决办法

我就是我 2022-03-02 09:12 565阅读 0赞

#### 双向数据绑定： ####

**错误：** `Template parse errors:Can't bind to 'ngModel' since it isn't a known property of 'input'.`

解决：

缺少 FormsModule，虽然 ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。

它属于一个可选模块 FormsModule，你必须自行添加此模块才能使用该指令。

在你的app.module中添加如下代码即可：
    
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    
    @NgModule({
        imports: [
             FormsModule   //此代码仅为需加入的部分，注意比对你本身的代码，把这个加入其中即可   
        ]
    })

#### 属性undefined ####

**错误：** `HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined`

解决方法：

把显示详情的 HTML 包裹在一个 <div> 中。 并且为这个 div 添加 Angular 的 *ngIf 指令，
    把它的值设置为 selectedHero。
    <div *ngIf="selectedHero">	</div>

#### 项目名不能使用下划线\_ ####

在ng new 的时候报错：Data path “.name” should match format “html-selector”.

#### ReactiveFormsModule问题 ####

在使用表单的时候会报如下错误：  
`Can't bind to 'formGroup' since it isn't a known property of 'form'.`

解决方法：

需要导入ReactiveFormsModule 模块
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    imports: [
      ReactiveFormsModule
    ],

#### ng new项目提示 ####

在使用angular cli安装项目的时候发现有时候没有 是否安装路由和选择css处理器的提示。一次安装就完成了。  
解决方法：  
使用电脑自带的命令行工具或者shift+powershell窗口创建项目即可

#### 后台返回数据格式不是JSON问题 ####

这个是由于后台返回的数据不是正确的Json数据格式导致的报错。  
服务器请求成功了，这才错误下面的text里面有圆括号。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

#### 路由重定向 ####

正确引入方式：

{
        path: '',
        redirectTo: 'anchor',
        pathMatch: 'full'
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

#### formGroup ####

<form [formGroup]="profileName">
        <div formArrayName="aliases">
            <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>
          
            <div *ngFor="let address of aliases.controls; let i=index">
              <label>
                Alias:
                <input type="text" [formControlName]="i">
              </label>
            </div>
        </div>
    </form>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]

#### ngModel设置name属性 ####

当在表单中使用 \[(ngModel)\] 时，必须要定义 name 属性。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]

#### httpClient数据请求 ####

在app.module.ts中添加httpClientModel模块：

import { HttpClientModule } from '@angular/common/http';

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220302/8456fab2d08d449bb467deba10fa9aee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20220302/12659a63170f436bb3f92db73d1cdc1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]: /images/20220302/333b3080f80a4b13a4490e3973c76664.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]: /images/20220302/0b0cb8aa2d754be1a9c99be3f71c4662.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 4]: /images/20220302/58c60a90363d4ff8bcfc29fee48511e3.png