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

【问题标题】：Cannot find a differ supporting object ,Async pipe and ngFor problems in angular2在 angular2 中找不到不同的支持对象、异步管道和 ngFor 问题
【发布时间】：2016-04-22 19:29:10
【问题描述】：

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

  @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]

任何想法我做错了什么？

【问题讨论】：

这看起来很像github.com/angular/angular/issues/6392
我在我的问题之前检查了这个，我找不到解决方案。我不知道为什么异步管道会这样。
其实我也没有。也许其他人可以对此有所了解。
那是因为您使用的是from，它一次返回您的数组中的一项。这意味着当异步订阅时，它得到的是一个对象，而不是一个数组。
在你的组件中添加changeDetection: ChangeDetectionStrategy.OnPush。

标签： angular rxjs angular2-template

【解决方案1】：

我对我的代码进行了一些修改就解决了这个问题。首先我换了

lblLeftAddons: Observable<InputAddon>;

与

lblLeftAddons: Observable<InputAddon[]>;

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

我修改了可观察的插件以返回数组

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

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

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

【讨论】：

我在迭代非数组时遇到了同样的问题（*ngFor="#item of items"，其中 items 不是数组）。