The set up:
- I have two pages, each one has an ngFor with a simple pipe over a collection of (differently) typed items
- I have an @Injectable () class with some protected fields and methods shared by the two
The problem:
- when I go from the first page to the second, I get an error on the console saying that there’s no differ for the type of the first page
The debug:
- I tried debugging and I see that before going to the second page, the pipe gets called
- it seems that the return from the pipe is getting evaluated in the second template, which assumes another typed list, and that’s why it breaks (removing the pipe in the second template doesn’t solve the issue)
If I remove the inheritance, of course, everything works just fine.
Is there a plnkr I could try to reproduce this?
Some code:
- the master page
@Injectable ()
export class MasterPage {
protected ToRevert : number[] = [];
onPageDidEnter () {
this.ToRevert = [];
}
}
- a snippet from the template. As you can see the call to the second page is inside an item of a list, is this why the pipe gets called?
<ion-item *ngFor="#item of Dn | userFilter:inputFilter.value:onlySel:'descrizione'; #i = index"
[ngClass]="{green: item.selected}">
<ion-row>
<ion-col (click)="toggle(item, i)">
<span>{{item.descrizione}}</span>
<p>Editori: {{item.countEditori}}</p>
</ion-col>
<ion-col>
<a href="#" (click)="gotoEditori(item)"><ion-icon style="float:right;" name="ios-arrow-forward"></ion-icon></a>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
Finally, the pipe in all its glory:
@Pipe({
name: 'userFilter'
})
export class UserFilterPipe implements PipeTransform {
transform(value:any, args:string[]): any {
let filter = args[0].toLocaleLowerCase();
let field = args[2];
let current = (filter && value) ? value.filter(ff => ff[field].toLocaleLowerCase().indexOf(filter) != -1) : value;
if(args[1]){
return current.filter(ff => ff.selected);
}
return current;
}
}