1.获取的form表单的值
angular中FormBuilder用来实例化创建表格，以简化FormGroup,FormControl或者FormArray实例的创建过程，他会减少构建复杂表单时所需的样式代码的数量。
FormGroup把FormControl的值聚合进一个对象，他的key时每个空间的名字。当实例化Form Group时，在第一个参数传入一组子组件。每个子空间把自己注册进去。可以理解为formGroup传入数组的key值就是FormControlName所跟的值。
<nz-select
id="codetype"
formControlName="codeType"
nzFor="codeType"
nzPlaceHolder="请选择"
(ngModelChange)="setCodes($event)"
>
<nz-option nzLabel="普通的礼物码，玩家可以使用" nzValue="1"></nz-option>
<nz-option nzLabel="一个玩家只能使用一个码" nzValue="2"></nz-option>
<nz-option nzLabel="一个兑换码，能够被多次使用(可能有次数限制)，多次使用" nzValue="3"></nz-option>
<nz-option nzLabel="邀请码" nzValue="4"></nz-option>
</nz-select>
</nz-form-control>
this.validateForm = this.fb.group({
goodsName: [null, [Validators.required]],
codeType: [null, [Validators.required]],
usenumber: [null, [Validators.required]],
currency: [null, [Validators.required]],
cardtag: [null, [Validators.required]],
});
const data = this.validateForm.value.codeType;//获取每个下拉框的值
2.传入参数时，要注意参数的数据类型
在该项目中，Id是一串符串，但请求期望参数传入的类型是数组，此时需要讲字符串id转成数组形式。如一下代码。
const arr: Array<string> = [];
arr.push(id);会改变原数组，返回的是数组的长度
this.invitationCodeService.getCodeList(this.pageIndex, this.pageSize).subscribe(res => {
const { total, list } = res.data;
this.total = total;
this.invitateCodeList = list.map(item => {
const { desc, type, binds, created_at, _id } = item;
return {
name: desc,
type,
coin: binds,
createtime: created_at,
id: _id,
};
});
});
es6的结构赋值，map遍历数组，返回的是一个新的数组。
4.结构性指令
构型指令会通过添加、删除和操纵它们的宿主元素等方式塑造或重塑 DOM 的结构。任何带有 * 的指令都是结构型指令。
*ng-if 指令用于在表达式为 false 时移除 HTML 元素。默认为false，如果if语句执行的结果为true,会添加移除元素，并显示出来。*ngif 指令不同于 *nghide， *nghide是通过控制css属性来控制元素的显示或者隐藏，而 *ngif 是从 DOM 中移除元素。
<nz-form-item *ngIf="isShow" nzFor="Codes"></nz-form-item>
this.isShow = data === 3 ? true : false;
*ngFor 是一个 Angular 的复写器（repeater）指令。用来遍历数组， 它会为数组中的每项数据复写它的宿主元素。
<tr><td *ngFor=" let item of items">{{item}}</td></tr>
当数据为这种结构式时，{id:1,birds:{{},{},{},{}}}，就会生成多个td，此时，可以在li里放一个span,这样就把问题解决了。
> #5.es6字符串拼接：`字符串`+`字符串`，变量不用``包裹。模板字符串。
public getCodeList(page, pageSize): Observable<any> {
return this.http.get('/invitation_code/model/list?page=' + page + '&pageSize=' + pageSize);
}
6.组件传值：input,output
##input
eg:在父组件中绑定属性，通过@input将该属性注入子组件中，然后子组件将拥有父组件的属性。
父组件：绑定属性
<ng-leaflet-shutter #shutterCmp [compareLayers]="compareLayers ></ng-leaflet-shutter>
子组件注入属性：
@Input() compareLayers
##output
一个装饰器，用于把一个类字段标记为输出属性，并提供配置元数据。凡是绑定到输出属性上的DOM 属性，Angular 在变更检测期间都会自动进行更新。你可以提供一个可选的仅供模板中使用的名字，在组件实例化时，会把这个名字映射到可绑定属性上。默认情况下，输出绑定的名字就是这个可绑定属性的原始名称。用法同input。
7.git操作
Git checkout -b dev 创建分支
Git branch -d dev 删除分支
Git add
Git commit -m ‘’ 提交代码到本地仓
Git push 提交代码
Git pull origin dev 拉取远程分支的代码
Git status 查看代码更改
Git log 查看代码提交日志
8.总结：
angular中组件功能都是单一的，可以将一个多次使用的功能封装成一个组件。将对数据的饿操作放到service中，将模块中需要的数据定以放到core下。
