Object change detection in array

Question

I need to manually (or automatically) change detect property of object in array. I have array of productShops entity in ngFor loop which is filtered by "isNotDeleted" property. When I change value of isNotDeleted property angular does not detect change.

<ul class="nav nav-tabs">
    <li *ngFor="let productShop of product.productShops | filter:'isNotDeleted':true" >
        <a href="#categoryAssocTab{{productShop.shop.id}}" data-toggle="tab">{{productShop.shop.name}}</a>
    </li>
</ul>

EDIT: Pipe implementation:

import {Pipe, PipeTransform} from "@angular/core";

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform{

    transform(value:Array<any>, property, equal){

        let properties = property.split('.')

        if(value){
            return value.filter(item => {

                let finalValue:any = item

                properties.forEach(p => {
                    finalValue = finalValue[p]
                })

                return finalValue == equal
            })
        }

        return []
    }

}

http://stackoverflow.com/questions/39757603/unraveling-angular-2-book-chapter-1-example-5/39761822#answer-39761822 — yurzui, Nov 13 '16 at 09:22
Thx! "pure: false" on filterPipe helped! Can you write regular answer? I accept it. — JaSHin, Nov 13 '16 at 09:25

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

Your pipe should be marked as not pure, because the result of its transformation for a given input can change even though the input hasn't changed.

@Pipe({
    name: 'filter',
    pure: false
})

Object change detection in array

1 Answers1