在angular2中找不到不同的支持对象，异步管道和ngFor问题

Question

I have component that takes as input array of 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 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"

but it 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

I solved it with few modifications on my code. First i replaced

lblLeftAddons: Observable<InputAddon>;

with

lblLeftAddons: Observable<InputAddon[]>;

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