前言

此文章主要收集自己在用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;
}

Angular + ng-antd-zorro 踩坑指南相关推荐

Egg整合antd文件上传以及防踩坑指南
Egg整合antd文件上传以及防踩坑指南前言一. 项目编写二. 注意事项 2.1 清理缓存 2.2 antd的Upload组件得到的事件对象问题 2.3 关于onChange事件的注意前言最 ...
Git Commit Message校验踩坑指南
背景在团队多人开发中,规范的commit message可以快速定位代码提交历史,回溯问题根源,方便组内多人协作,提高团队效率. 本篇文章主要包含以下两方面内容: commitizen/cz-cli ...
pytorch .item_从数据到模型，你可能需要1篇详实的pytorch踩坑指南
原创 · 作者 | Giant 学校 | 浙江大学研究方向 | 对话系统.text2sql 熟悉DL的朋友应该知道Tensorflow.Pytorch.Caffe这些成熟的框架,它们让广大AI爱好者 ...
tabbar角标小程序_【沃行课堂】恭喜你遇到“坑”，小程序踩坑指南
上周我们的开发小哥哥带领我们一起领略了开发中遇到的各种问题,以及基于SaaS模式的平台技术架构及实现.本周我们换个方向,由高级开发工程师秋哥带领大家共同探讨下小程序开发中踩过的坑.秋哥会从公司的几个小 ...
MacBook通过XGP玩女神异闻录5皇家版不踩坑指南
XGP是微软Xbox游戏通行证服务,全称Xbox Game Pass,俗称西瓜皮. 女神异闻录5皇家版(P5R)登录了全平台,XGP会员可以通过云游戏在MacBook中游玩,本篇为MacBook玩P5 ...
联调中通wincall平台-踩坑指南
开发踩坑指南初始化阶段 new CTIPlus({token: user.token, //tokenagentPhone: user.phone, //坐席工号或者手机号agNo: user.ag ...
Spring Cloud踩坑指南
Spring Cloud踩坑指南 1 Spring Cloud搭建参考 Spring Cloud 微服务技术栈:搭建高可用 Eureka Server.服务注册与发现 2 常见问题 2.1 修改ho ...
openssl开发库安装时的踩坑指南
序前几天用linux编译一个提权脚本的时候报错 openssl/opensslv.h: 没有那个文件或目录的问题无论如何也解决不了,这下我记录一个踩坑指南防止下一个人掉进坑里操作总体介绍首 ...
Pychram连接mist远程服务器踩坑指南
Pychram连接mist远程服务器踩坑指南 ##Mist使用方法首先需要到MistGpu官网注册一个账号,注册就送8元的免费体验,Mist官网:https://mistgpu.com/,然后选择创 ...
阿里云天池【Docker练习场】踩坑指南
阿里云天池[Docker练习场]踩坑指南题目直达提交环境搭建(基于macOS) Docker的安装与基本功能使用 Docker安装过程遇到的小问题提交结果注意事项提交时的镜像配置项目结构规范 ...

Angular + ng-antd-zorro 踩坑指南

前言

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

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

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

Angular + ng-antd-zorro 踩坑指南相关推荐

最新文章

热门文章