angular7常见错误及解决办法

双向数据绑定：

错误： 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里面有圆括号。

路由重定向

正确引入方式：

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

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>

ngModel设置name属性

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

        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name">

httpClient数据请求

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

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