angular-列表進行添加、編輯等操作時此行變色。

標籤：job   cli   item   img   改變   操作   功能   行編輯   事件   

今天接觸了一個功能，就是在一個列表中，當你新增或者對第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)三、編輯

angular-列表進行添加、編輯等操作時此行變色。