ngFor Loop Angular 2的异步管道过滤器

时间:2016-11-14 02:19:06

标签: angularjs arrays json angular typescript

我有一个JSON数组,我迭代通过在NGfor循环中显示数据,然后我想在加载后应用过滤器来优化结果。数据以异步方式加载。到目前为止工作,但我的管道过滤器只是返回无法读取未定义的属性。我究竟做错了什么?我已经简化了组件,不包括获取数据的http请求,以及管道语句上的返回逻辑。

// 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

  }

}

*更新了修复程序*

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

1 个答案:

答案 0 :(得分:1)

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