Question

我有一个组件，它作为对象的输入数组，应该被过滤并显示在模板中。

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

班上的定义如上所述。

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));
}

这是我过滤数组的代码

在模板中我有这个代码

*ngFor="#addon of lblLeftAddons | async"

但它不起作用。我得到例外

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

任何想法我做错了什么？

Answer 1

我解决了它，对我的代码进行了一些修改。首先我换了

lblLeftAddons: Observable<InputAddon>;

与

lblLeftAddons: Observable<InputAddon[]>;

Observable必须返回数组才能使ngFor工作。

我修改了addon observable以返回数组

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

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

我还在我的组件定义中添加了changeDetection: ChangeDetectionStrategy.OnPush

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

1 个答案: