以角度 4 获取数组中的特定项目

Question

在 Angular 视图中，我定义了一个变量 data，如下所示：

[{"name":"science", count: 3},
 {"name":"action", count: 1},
 {"name":"thriller", count: 1},
 {"name":"article",  count: 1},
]

" 因此，在 html 文件中，我想获取名称“科学”或“文章”的计数值

我试过这样：

 <span ng-repeat="item in data| filter: {name: "science"}"> 
    {{ item.count }} 

 </span>

但这没有给出任何东西，我猜是因为过滤器。我怎样才能做到这一点？谁能帮帮我？

Answer 1

首先，您将混淆 AngularJS (1.x) 语法，对于 Angular (2+)，您应该使用 ngFor 和 自定义管道 进行过滤。

 <span> <tr *ngFor="item in data  | sciencefilter:'science'"> {{ item.count }} </span>

你的过滤器应该是

@Pipe({
    name: 'sciencefilter'
})
@Injectable()
export class ScienceFilterPipe implements PipeTransform {
    transform(items: any[], type: string): any {
        return items.filter(item => item.id.indexOf(type) !== -1);
    }
}

不使用过滤器

count :number;

然后，

this.count = this.items.filter(t=>t.name ==='science');

在组件中

 <span> 
    {{ count.length }}
 </span>

Answer 2

你可以像这样使用管道 -

import {Injectable, Pipe, PipeTransform} from 'angular2/core';

@Pipe({
    name: 'myfilter'
})
@Injectable()
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.id.indexOf(args[0]) !== -1);
    }
}

模板看起来像这样 -

*ngFor="let element of (elements | myfilter:'123')"