I have component that takes as input array of objects that should be filtered and displayed in the template.
@Input() inputAddons: Array;
addOns: Observable;
lblLeftAddons: Observable;
The definition in the class is above. ngOnInit(): void {
this.addOns = Observable.from(this.inputAddons);
this.lblLeftAddons = this.addOns.filter(function (x){
return x.pos == 'left' && x.type == 'label'}
);
this.lblLeftAddons.subscribe(x => console.log(x));
}
this is the code where i filter the array in the template i have this code *ngFor="#addon of lblLeftAddons | async"
but5' has changed after it was checked. Previous value: '2,4,6,8,10'. Current value: '[object Object]' in [observable | async in AppComponent@6:25] At first I used it in the constructor, but I change it out, because I thought that using the reit doesn't work. I get exception Cannot find a differ supporting object '[object Object]' in [lblLeftAddons | async in InputText@14:10]
Any ideas what i do wrong? answer 1 >>---Accepted---Accepted---Accepted---
I solved it with few modifications on my code. First i replaced lblLeftAddons: Observable;
with lblLeftAddons: Observable;
Observable must return array in order ngFor to work. And i modified addon observable to return array this.lblLeftAddons = this.addOns.filter(function (x){
return x.pos == 'left' && x.type == 'label'}
);
Also i added changeDetection: ChangeDetectionStrategy.OnPush in my Component definition
ngular throws error of Cannot find a differ supporting object . here is Plnkr throwing error http://plnkr.co/edit/qgrOmRlUcAZq1spGALEap=preview