Сравнение ng для старого и нового значения при обнаружении изменений

Привет, мне нужна помощь по angular. У меня есть циклический массив ngfor из наблюдаемого, и этот массив периодически меняется, теперь я хочу сравнить старое и новое значение каждого изменения массива wen списка. Цель состоит в том, чтобы мигать зеленым цветом на элементе списка при увеличении значения или красным при уменьшении значения.

<div *ngfor="let item of items" >
<span class="" >{{item.price}}</span>
</div>

Класс Span должен быть красным, если item.price меньше предыдущего значения после обнаружения изменения, или должен быть зеленым, если больше предыдущего значения


typescript angular angular-changedetection ngfor
person Pride Mutumbami    schedule 29.05.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что вы можете сделать, так это использовать метод, сравнивающий новое и старое значение.

TS-файл

// your current items
const items: Array<Item> = [];

// a copy of the items which represent the previous state
const comparables: Array<Item> = [];


// Compare the price and return the corresponding CSS-class
getItemColor(item: Item): string {
     const oldItemIndex = this.comparables.findIndex(element => element.id === item.id);

     // a guard for preventing null and undefined problems
     if (oldItemIndex === -1) { return 'black' };
     
     const oldItem = this.comparables[oldItemIndex];
     
     if (item.price > oldItem.price) { return 'green' };
     if (item.price === oldItem.price) { return 'black' };
     if (item.price < oldItem.price) { return 'red' };
}

// inside your observable
value => {
     // JSON.parse/stringify is used to generate unique clones.
 
    // copy the current items into the list for old items
    this.comparables = JSON.parse(JSON.stringify(this.items));

    // override the list for current items
    this.items = value;
}

HTML

<div *ngfor="let item of items" >
    <span [class]="getItemColor(item)">{{item.price}}</span>
</div>

CSS

И здесь вы определяете классы зеленый, черный и красный.

.red {
    color: red;
}

.black {
    color: black;
}

.green {
    color: green;
}
person Lynx 242    schedule 29.05.2021