Question

我试图在角度2中创建我的第一个自定义管道，但似乎我在代码中遗漏了一些东西阻止我获得所需的输出：我想只显示Type的名称等于＆＃39; T＆＃39;或者＆＃39; A＆＃39;：

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

首先，您需要将您的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'); } }

@Component({
selector: 'my-selector',
styles: [
    require('./my.style.scss'),
    ':host >>> .mystyle { background-color: green }'
],
templateUrl: './my.template.html'
})

Demo Here

Answer 2

您必须合并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的项目（如果没有，则为空）

Angular2中的管道

2 个答案: