I am trying to understand why my *ngFor pipe filter does not get triggered, it works for "checkbox two" but not for "checkbox one", see example below.
I added two checkboxes that I want to trigger my pipe filter in *NgFor. How can I make "checkbox one" to trigger my NgFor PIPE filter? Does not seem like it get any change detected when using a json object as parameter. Also, did try detectChanges but that did not work.
View
<!-- checkbox one -->
<ion-checkbox labelPlacement="end" [checked]="checkbox_one.isChecked" (ionChange)="setColorOne(checkbox_one.isChecked)">filter one</ion-checkbox>
<!-- checkbox two -->
<ion-checkbox labelPlacement="end" [checked]="checkbox_two" (ionChange)="setColorTwo(checkbox_two)">filter two</ion-checkbox>
<div *ngFor="let index of [0,1] | color : checkbox_one"></div>
<div *ngFor="let index of [0,1] | color : checkbox_two"></div>
Controller
public checkbox_two = true;
public checkbox_one =
{
isChecked: true
}
public setColorOne(color:any) {
this.checkbox_one.isChecked = !color;
//this.changeDetection.detectChanges();
}
public setColorTwo(color:boolean) {
this.checkbox_two = !color;
}
Pipe
transform(items: any[], colors:any): any[] {
console.log("PIPE");
return items;
}
There are 2 use cases:
primitive type
vsnon primitive type
.public checkbox_two = true;
Your pipe can trigger any change from your variable because the value has been changed. Primitive type seems not have any problem.
Remember the mechanism of pipe :
In this case, the pipe isn't invoked because the argument has not changed :
You must update your object like that to tell your pipe that the reference has been changed: