title: async pipe filter for ngFor Loop Angular 2
body: <p>I have a JSON array that i iterate through to display data in an NGfor Loop, I then want to apply filters after loading to refine results. The data is loaded asynchronously. So far that works, but my pipe filter just returns cannot read property of undefined. What am i doing wrong? I have simplified the component, by not including the http Request to get data, as well as the return logic on the pipe statement. </p>
  
  <pre><code>// component 
  import { Observable } from 'rxjs/Rx';
  currentData:any = httpRequest; // Simplified  
  
  
  
  // html 
  &lt;div *ngFor="let item of currentData | async | datePipe; let i = index"&gt;
   //display content
  &lt;/div&gt;
  
  
  // pipe
  import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'datePipe'
  })
  export class DatePipe implements PipeTransform {
  
    transform(time:any []): any[] {
      console.log(time);
      return time.filter(it =&gt; it["createDt"] != -1); // Simplified
  
    }
  
  }
  </code></pre>
  
  <p><strong>*Updated fix *</strong></p>
  
  <pre><code>   // html 
      &lt;div *ngIf="currentData?.length &gt; 0"&gt;
        &lt;div *ngFor="let item of currentData | datePipe; let i = index"&gt;
          //display content
        &lt;/div&gt;
      &lt;/div&gt; 
  
     //pipe 
      transform(time:any): any {
       for(let key of time){
          console.log(key.somevalue);
       }
    }
  </code></pre>