Angular框架中使用ng-zorro-antd实现可编辑的table表格

Posted 2023-05-11

参考技术A 想要实现可编辑的表单，需要考虑两个事件，一个是失焦点击事件，另外一个是当用户点击单元格的input时，可以让单元格的input进行编辑。
首先，我们需要在 module.ts 模块文件导入我们需要使用的组件依赖

导入之后，我们开始写表格组件，根据视图的 status 状态，来控制 input 的可编辑性。

在这个模板中， userName 这个字段中，通过使用一个 status 来判断这个单元格的状态，点击输入框时，我们不需要去固定去一些状态的枚举去进行操作，直接取反即可 data.status = !data.status 。当 data.status 为 true 时，表示目前是编辑状态， false 则使用 span 标签只去显示。

输入框的 standalone: true 时不会发生(不会添加到 FormGroup 中)

关于ng-zorro-antd阿里的UI框架

参考技术A 这个UI框架也是楼主接触项目后才了解到的，是阿里事业部的团队做的，可是说这个框架就是专门为angular而做的，也不是别的框架不能使用这套UI，大家去看看ant的官网就知道什么回事了。

ng-zorro-antd的版本也是跟随angular的版本实时更新的，目前最新版本的antd已经支持angular7了，一般在新项目创建之后就可以安装ng-zorro-antd了。

假具体步骤：

ng new 项目名

cd 项目文件夹

ng add ng-zorro-antd

然而这里会有一个坑，大家这么做之后肯定会报错，为什么呢？

因为add只是加入这个UI框架，你还没有安装，加入个啥呢？官网其实也写到了，只是写的顺序让一些初学者不得不去踩这个坑。

真具体步骤：

ng new 项目名

cd 项目文件夹

npm install ng-zorro-antd --save

ng add ng-zorro-antd

上面这套才能正确的把ng-zorro-antd加入到你的项目中，加入之后再ng serve启动项目，出现了ng-zorro的图标就表示这个UI框架已经成功融入了你的项目。

然后阿里的这个antd框架官网也非常简便，可能国人制作也知道国人的习惯，大家使用起来跟bootstrap一样使用即可，都是属性标签里使用，个人觉得antd的亮点在于可以节省非常多的时间，比如生成一个对话框，直接套用官方给的modal组件即可使用，对话框的确定/取消事件也包含了。