Angular2管道会过滤,但根本不显示

时间:2017-05-17 15:59:25

标签: angular

我正在使用此答案的代码Angular 2 - ngFor index after a pipe, 但我现在的问题是,实际上我得到了过滤的项目而不是文本本身,在我的页面中我只看到一些空的div。 如果选择其中一个项目,我可以在另一个div中看到所选项目的所有细节。

我的管道代码:

@Pipe({
  name: 'appFilter',
  pure: false
})

export class AppFilterPipe implements PipeTransform {
  transform(values: any[], arg1: any, arg2: any): any {

    return values.reduce((acc, value, index) => 
       value[arg1] == arg2 ? [...acc, { index, value }] : acc, []);
  }
}

过滤对象的html:

<div (click)="showComentario(fc.index);" 
      class="comentario" 
      *ngFor="let fc of comentarios | appFilter:'fav':1">
    {{fc.comment}}
    <div [ngClass]="setCss(fc.sentimient)"></div>
</div>

发生什么事情,我看不到过滤物品的文字?

1 个答案:

答案 0 :(得分:1)

您需要使用新添加索引的对象来访问注释:

{{ fc.value.comment }}

在你的烟斗中,你没有做过滤器。管道中的内容并不是完全相同的对象。

这是因为你正在转动一个如下所示的对象:

{
  fav: '1',
  comment: 'abc'
}

管道之后进入这个:

{
  index: 0,
  value: {
    fav: '1',
    comment: 'abc'
  }
}

另一个选项

如果您真的想保留索引值,但又不想要额外的深度,可以使用管道中的Object Spread Operator

[...acc, { index, ...value }]

这将为您创建一个平面对象,但它尚未包含在ECMAScript的最新版本中。