[发明专利]通过Angular实现可视化删除和添加键值对的方法

权利要求书

1.通过Angular实现可视化删除和添加键值对的方法，其特征在于，包括如下步骤：

定义新的数组存放数据，操作新的数组生成带有键值对输入框、添加按钮及删除按钮的模板，点击添加按钮生成新的键值对输入框，点击删除按钮删除相应行的键值对输入框；

所述定义新的数组用于存放数据，所述新的数组存储一个对象，所述对象中存放两个键值对，所述两个键值对的键分别是指向最终键值对的键和值。

2.根据权利要求1所述的通过Angular实现可视化删除和添加键值对的方法，其特征在于，所述操作新的数组生成带有键值对输入框、添加按钮及删除按钮的模板，具体实现步骤为：

在div元素上使用Angular内置结构指令ngFor遍历所述新的数组，所述div元素包裹两个input元素和一个button元素，所述遍历将所述新的数组中的对象分别传递给input元素和button元素，所述input元素的type设置为text。

3.根据权利要求2所述的通过Angular实现可视化删除和添加键值对的方法，其特征在于，所述input元素，其中第一个元素使用ngModel指令将所述遍历的具体项的第一个键到自己身上，用于同步用户输入的键和所述新的数组中对应对象的第一个键值对，其name属性需用字符串和遍历下标组合加以区分；

其中，第二个元素使用ngModel指令将所述遍历的具体项的第二个键到自己身上，用于同步用户输入的值和所述新的数组中对应对象的第二个键值对，其name属性需用字符串和遍历下标组合加以区分，且需和第一个input元素的name属性值不同；

所述div元素内部的button作为删除按钮，所述删除按钮绑定click事件，监听删除函数，并将遍历出来的具体项的下标传递至所述删除函数中，所述div元素外部放置button，作为添加按钮，所述添加按钮绑定click事件，用于监听添加函数。

4.根据权利要求1或3所述的通过Angular实现可视化删除和添加键值对的方法，其特征在于，所述点击添加按钮生成新的键值对输入框，具体实现步骤为：

点击添加按钮，触发上述添加函数。

5.根据权利要求4所述的通过Angular实现可视化删除和添加键值对的方法，其特征在于，所述添加函数具体实现步骤为：利用新的数组的push方法向上述新的数组中添加新的对象，所述新的对象中存放两个键值对，所述两个键值对的键于所述新的数组中其他对象里的键同名，分别是指向最终键值对的键和值，且所述两个键值对的值均为空字符串。

6.根据权利要求1或3所述的通过Angular实现可视化删除和添加键值对的方法，其特征在于，所述点击删除按钮删除对应行键值对输入框，具体实现步骤为：

点击某组键值对后边的删除按钮，触发上述删除函数。

7.根据权利要求6所述的通过Angular实现可视化删除和添加键值对的方法，其特征在于，所述删除函数具体实现步骤为：利用新的数组的splice方法，将上述新的数组中对应于所述删除函数传递过来的下标处对应的对象删除。

8.根据权利要求1所述的通过Angular实现可视化删除和添加键值对的方法，其特征在于，还包括将所述新的数组处理为对象时，所述对象以键值对的结构存储用户输入的数据。

9.根据权利要求8所述的通过Angular实现可视化删除和添加键值对的方法，其特征在于，将新的数组处理为对象的方法具体为：

定义新的空对象，所述空对象用于存储用户输入的数据，遍历第一方面中所述的新的数组，通过判断所述遍历的具体项中第一个键值对的值和第二个键值对的值是否为空，以此为依据，过滤掉所述具体项中第一个或第二个键值对的值为空的数据；

数据过滤之后，在所述空对象中创建以所述遍历的具体项的第一个键值对的值为键的项，并将所述遍历的具体项中第二个键值对的值赋值给所述项，将新的数组数据处理为对象。