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'); 
    } 
}