Трубы в Ангуляр2

angular filter pipe

803 просмотра

2 ответа

Я пытаюсь создать свой первый пользовательский канал в angular 2, но мне кажется, что в коде отсутствует что-то, что мешает мне получить желаемый результат: я хочу отображать только имена, где Type равен '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"}
 ];

 }
Автор: Maryam Источник Размещён: 08.11.2019 11:21

Ответы (2)


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

Демо Здесь

Автор: Pankaj Parkar Размещён: 20.08.2016 01:45

0 плюса

Вы должны будете объединить свою 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(или будет пустым, если их нет)

Автор: eltonkamami Размещён: 20.08.2016 01:29
Вопросы из категории :
32x32