title: Cannot find a differ supporting object ,Async pipe and ngFor problems in angular2
body: <p>I have component that takes as input array of objects that should be filtered and displayed in the template.</p>
  
  <pre><code>  @Input() inputAddons: Array&lt;InputAddon&gt;;
    addOns: Observable&lt;InputAddon&gt;;
    lblLeftAddons: Observable&lt;InputAddon&gt;;
  </code></pre>
  
  <p>The definition in the class is above.</p>
  
  <pre><code>ngOnInit(): void {
  this.addOns = Observable.from(this.inputAddons);
  this.lblLeftAddons = this.addOns.filter(function (x){
    return x.pos == 'left' &amp;&amp; x.type == 'label'}
  );
  
  this.lblLeftAddons.subscribe(x =&gt; console.log(x));
  }
  </code></pre>
  
  <p>this is the code where i filter the array</p>
  
  <p>in the template i have this code</p>
  
  <pre><code>*ngFor="#addon of lblLeftAddons | async"
  </code></pre>
  
  <p>but it doesn't work. I get exception</p>
  
  <pre><code>Cannot find a differ supporting object '[object Object]' in [lblLeftAddons | async in InputText@14:10]
  </code></pre>
  
  <p>Any ideas what i do wrong?</p>