Angular + ng-antd-zorro 踩坑指南

前言

此文章主要收集自己在用angular+antd过程中所遇到的坑，以及angular框架所遇到的一些难题。

1、表单中动态绑定数据报错：ngModel cannot be used to register form controls with a parent formGroup directive. Try using； formGroup’s partner directive “formControlName” instead.

这个报错的意思就是 当我们在表单中手动去动态绑定数据的时候，没使用表单的formControlName来进行数据绑定。因为表单在我看来属于一个房子，你想在我这里面做什么事，你就得听我的，你不能私自为所欲为。

比如我们给input动态绑定

<input nz-input placeholder="请输入" [(ngModel)]="value" />

这时候需要添加一个属性：

<input nz-input placeholder="请输入" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" />

把当前数据组件变成 独立的即可，就不会受form表单控制了。不止input，包括其他的表单组件，select…等。

2、ngFor循环绑定input框动态数据报错：Cannot assign value “$event” to template variable “item”. Template variables are read-only.

代码演示：

<div class="a" *ngFor="let item of list;">
  <input nz-input placeholder="请输入" [(ngModel)]="item" />
</div>

修改：

<div class="a" *ngFor="let item of list; let index = index;">
  <input nz-input placeholder="请输入" [(ngModel)]="list[index]" />
</div>

3、ngFor循环绑定input输入框时，当我们输入的时候，每输入一个字符（点击键盘），input框就会失去焦点

这个问题就跟vue中的key有关系，当我们输入的时候，Angular看到了新的对象引用组成的新的列表，它只能用所有新的 DOM 元素替换旧的 DOM 元素，导致input也是新的input了，就会失焦。
我们解决办法，就是追踪index下标值。

代码演示：

<div class="a" *ngFor="let item of list; let index = index;">
  <input nz-input placeholder="请输入" [(ngModel)]="list[index]" />
</div>

修改：

<div class="a" *ngFor="let item of list; let index = index; trackBy: trackByFn;">
  <input nz-input placeholder="请输入" [(ngModel)]="list[index]" />
</div>

public trackByFn(index: number): number {
	return index;
}