iangularjs 模板_rxjs - Cannot find a differ supporting object ,Async pipe and ngFor problems in angula...

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