简体   繁体   中英

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM