Angular5踩坑总结

表单双向绑定
1：做双向绑定时，如果遇见Angular: Can't bind to 'ngModel' since it isn't a known property of 'input'问题
解决办法：
在你的app.module中添加如下代码即可：
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule //此代码仅为需加入的部分，注意比对你本身的代码，把这个加入其中即可
]
}];
2：ngModule在form标签下使用
当你运行时，浏览器控制台将会抛出以下异常信息：
Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

给input增加name属性就可以了， 同理select和textarea有同样的问题， ngModelChange 事件是ngmodule改变时的事件

3： uuid随机生成一组不可能重复的字符序列
引入模块
npm i --save angular2-uuid
引用
import { UUID } from 'angular2-uuid';
使用
id: UUID.UUID()

4.ngSwitch指令：它包括两个指令，一个属性指令和一个结构指令。它类似于 JavaScript 中的 switch 语句

<ul [ngSwitch]='person.country'>
  <li *ngSwitchCase="'UK'" class='text-success'>
      {{ person.name }} ({{person.country}})
  </li>
   <li *ngSwitchCase="'USA'" class='text-secondary'>
      {{ person.name }} ({{person.country}})
  </li>
  <li *ngSwitchDefault class='text-primary'>
    {{ person.name }} ({{person.country}})
  </li></ul>

*ngSwitchCase等价于[ngSwitchCase]
通过上面的例子，可以看出结构指令和属性指令的区别。结构指令是以 * 作为前缀，这个星号其实是一个语法糖。它是 ngIf 和 ngFor 语法的一种简写形式。Angular 引擎在解析时会自动转换成 <template> 标准语法。