async pipe filter for ngFor Loop Angular 2

Question

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.

// component 
import { Observable } from 'rxjs/Rx';
currentData:any = httpRequest; // Simplified  



// html 
<div *ngFor="let item of currentData | async | datePipe; let i = index">
 //display content
</div>


// 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 => it["createDt"] != -1); // Simplified

  }

}

*Updated fix *

   // html 
    <div *ngIf="currentData?.length > 0">
      <div *ngFor="let item of currentData | datePipe; let i = index">
        //display content
      </div>
    </div> 

   //pipe 
    transform(time:any): any {
     for(let key of time){
        console.log(key.somevalue);
     }
  }

I had a similar issue loading async data, but not with pipes. The solution someone suggested me was surrounding the *ngFor with a *ngIf currentData. Something like this: <div *ngIf=currentData><div *ngFor="let item of currentData | async | datePipe; let i = index"> //display content </div></div> — OvSleep
I would suggest basically the same thing as @OvSleep, with a little change in *ngIf, it should be *ngIf="currentData?.length > 0". — developer033
Thank you both, this is correct. See my modified answer for the final solution — Paddy

Paddy Paddy · Accepted Answer · 2016-11-17T01:11:36

   // html 
    <div *ngIf="currentData?.length > 0">
      <div *ngFor="let item of currentData | datePipe; let i = index">
        //display content
      </div>
    </div> 

   //pipe 
    transform(time:any): any {
     for(let key of time){
        console.log(key.somevalue);
     }
  }

async pipe filter for ngFor Loop Angular 2

1 Answers