Cannot find another supporting object, Async pipe and ngFor problems in angular2

Question

I have a component that accepts as an input array objects that should be filtered and displayed in the template.

  @Input() inputAddons: Array<InputAddon>;
  addOns: Observable<InputAddon>;
  lblLeftAddons: Observable<InputAddon>;

The definition in the class is higher.

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 in which i filter the array

in the template i have this code

*ngFor="#addon of lblLeftAddons | async"

but that will not work. I get an exception

Cannot find a differ supporting object '[object Object]' in [lblLeftAddons | async in InputText@14:10]

Any ideas what I'm doing wrong?

Answer 1

I solved this with minor changes in my code. I replaced first

lblLeftAddons: Observable<InputAddon>;

from

lblLeftAddons: Observable<InputAddon[]>;

Observable must return an array in ng order to work.

And I modified the addon observed to return the array

this.lblLeftAddons = this.addOns.filter(function (x){

 return x.pos == 'left' && x.type == 'label'}
);

I also added changeDetection: ChangeDetectionStrategy.OnPushin my component definition