当前位置: 首页 > 知识库问答 >
问题:

ngFor环路Angular 2的异步管道过滤器

邵凯定
2023-03-14

我有一个 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个答案

沈俊美
2023-03-14
   // 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);
     }
  }
 类似资料:
  • 在这个Plunker中,我有一个模板: 这是组件类: 这确实有效,我确实在输出中看到了。但是我想使用管道。 因此,我希望我的模板是: 但是有一个问题。 不是数组。它是一个具有prop的对象,该属性是必需的数组。 我不能这样做: 我创建了另一个plunker,它只返回一个数组: 而且它可以与一起工作。 问题: 看看我的第一个代码,我如何使用异步管道,同时仍然解析一个对象而不是一个数组?

  • 我想检查实际元素是否有值。 例如,我想检查巧克力是黑色还是白色。根据这个,我想显示正确的文本。 如何修复代码,使其正常工作?

  • 我想在过滤器返回空数组时显示一条消息,例如“未找到结果” 这是我的ngFor列表,它有一个过滤器 如果没有过滤器,这很容易,但是因为有过滤器,我不知道怎么说过滤器没有返回结果。 这是我的过滤器: 这一切都有效,但我只需要向用户显示,过滤器没有返回结果,而是返回消息,而不是空屏幕。

  • 我在尝试用异步数据初始化过滤器时遇到了麻烦。 过滤器非常简单,它需要将路径转换为名称,但要做到这一点,它需要一个对应数组,我需要从服务器获取该数组。 在返回函数之前,我可以在过滤器定义中做一些事情,但是异步方面阻止了这一点 使用promise可能是可行的,但我不清楚角度负载是如何过滤的。这篇文章解释了如何通过服务实现这样的魔力,但是对于过滤器也可以这样做吗? 如果有人对如何翻译这些路径有更好的想法

  • 我刚开始学习angular4,遇到了一个概念上的问题。管道(在本例中与结合使用)用于订阅可观察的,而不用手动订阅。查看web上的示例: 情况1:绑定到包含单个项(如

  • 本文向大家介绍详解Angular2 关于*ngFor 嵌套循环,包括了详解Angular2 关于*ngFor 嵌套循环的使用技巧和注意事项,需要的朋友参考一下 在项目开发中拿到的数据是这样的,要循环遍历出来。可是在ng2中好像不能直接遍历Object 在搜索之后发现了这种方法可以实现。 array-ngfor.ts array-ngfor.html 重点的是这个方法 结果: 以上就是本文的全部内容