Paddy Paddy - 21 days ago 34
JSON Question

async pipe filter for ngFor Loop Angular 2

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);
}
}

Answer
   // 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);
     }
  }