4

フィルタリングしてテンプレートに表示する必要があるオブジェクトの入力配列として受け取るコンポーネントがあります。

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

私が間違っていることはありますか？

4

1 に答える 1

6

コードを少し変更するだけで解決しました。まず交換した

lblLeftAddons: Observable<InputAddon>;

と

lblLeftAddons: Observable<InputAddon[]>;

ngFor が機能するためには、Observable が配列を返す必要があります。

そして、配列を返すようにアドオンオブザーバブルを変更しました

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

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

changeDetection: ChangeDetectionStrategy.OnPushまた、コンポーネント定義に追加しました

于 2016-01-17T18:02:45.370 に答える