我正在使用此答案的代码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>
发生什么事情,我看不到过滤物品的文字?
答案 0 :(得分:1)
您需要使用新添加索引的对象来访问注释:
{{ fc.value.comment }}
在你的烟斗中,你没有做过滤器。管道中的内容并不是完全相同的对象。
这是因为你正在转动一个如下所示的对象:
{
fav: '1',
comment: 'abc'
}
管道之后进入这个:
{
index: 0,
value: {
fav: '1',
comment: 'abc'
}
}
另一个选项
如果您真的想保留索引值,但又不想要额外的深度,可以使用管道中的Object Spread Operator
[...acc, { index, ...value }]
这将为您创建一个平面对象,但它尚未包含在ECMAScript的最新版本中。