Angular2中的管道

Question

我想在角度2中创建我的第一个自定义管道，但似乎我在代码中缺少某些东西阻止我获取所需的输出：我想仅显示类型相同的名称以“T”或“A”：

import { Component } from '@angular/core'; 
import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({name:"search"}) 
export class search{ 
    transform (value){ 
    x = []; 
    x = items.filter(item => item.Type = 'T'); 
    x = items.filter(item => item.Type = 'A'); 
    return x; 
    } 
} 

@Component({ 
selector: 'my-app', 
Pipes: [search], 
template: ` 
    <h1>My First Angular 2 App</h1> 
    <br> 
    <li *ngFor = "#c of todos.Name">{{c | search}}</li> 
` 
}) 
export class AppComponent { 

todos = [ 
    {"Name":"Sleep","Type":"T"}, 
    {"Name":"Eat","Type":"E"}, 
    {"Name":"Work","Type":"T"}, 
    {"Name":"Jump","Type":"A"} 
]; 

} 

Answer 1

你将有你的Array#filter功能，像这样

@Pipe({name:"search"}) 
export class search implements PipeTransform{ 
    transform (value){ 
    return items.filter(item => item.Type == 'T' || item.Type == 'A'); 
    } 
} 

只要items是一个数组的Array#filter总是会返回一个数组结合起来，所以没有需要将x设置为一个空数组。

你现在这样做的方式。
1.设置X为空数组
2 x是所有类型T
3 x的项目是所有类型的A

因此，X将始终有项中的项有型的A（如果有没有或为空）

Answer 2

你有你的HTML模板变成像下面应该pipe上todos得到应用上ngFor

template: `<h1>My First Angular 2 App</h1> 
    <li *ngFor = "let c of todos | search"> 
    {{c.Name}} 
    </li>` 

第一件事

，然后改变你的Pipe下面像@eltonkamami已经建议

@Pipe({name:"search"}) 
export class search implements PipeTransform{ 
    transform (items){ 
     return items.filter(item => item.Type == 'T' || item.Type == 'A'); 
    } 
}