angular-列表进行添加、编辑等操作时此行变色。

今天接触了一个功能，就是在一个列表中，当你新增或者对第N列进行编辑，删除等操作时这一列会变颜色。让用户对操作了哪行数据更认识更清晰，刷新之后这行的颜色就会消失。我觉得这个很有意思，记录一下。效果如下。

其实它的原理是前端从后台获取这个列表的数据。然后在前端对要需要变色的列表list加上一个判断是否调用变色样式的boolean属性，然后html页利用[ngClass]方法改变该列引用的CSS样式，使其颜色改变，语法如下。

当中涉及的细节还是挺多的。重点在于，它判断是否调用样式的属性，例如上图中的isDis和isAdd是在前端附加在数组上的。而添加、删除后的数据也并非是从后台获取，而是直接在前端操作数组。只有刷新后才真正从后端获取数据，此时后端数据里没有样式属性isDis和isAdd。则颜色恢复。其中对数据的操作可以记录一下。

一、增加

在增加时用了这么一个方法

this.joblists.unshift(returnItem)

unshift是将一组数returnItem加入到数列joblists的第一项。

二、删除

(click)="deleteData(joblist, i)"

在点击事件中将i(此数列的索引，可看上图里的 let i = index，刚刚才发现！)传入函数deleteData中，执行以下删除代码

this.joblists.splice(index, 1)

三、编辑

===================================分割线======================================

       今天上班又看了这个问题。第一张图里的let i = index 获得的应该是数组的下标，从0开始。由于列表第二页重新请求，下标也是从0开始。它的功能与第二种图中indexOf求得的相同。而且它并不存在我之前遇到的删除混乱问题。测试是没问题的。下标改变后，原先加入数列不变。我把编辑改成直接用下标赋值。这样不需要遍历joblist对比ID。减少负担

转载于:https://www.cnblogs.com/y543004756/p/9726333.html