Tubo de filtro angular 2

Tratando de escribir un tubo personalizado para ocultar algunos elementos.

import { Pipe } from '@angular/core'; // Tell Angular2 we're creating a Pipe with TypeScript decorators @Pipe({ name: 'showfilter' }) export class ShowPipe { transform(value) { return value.filter(item => { return item.visible == true; }); } } 

HTML

   

COMPONENTE

 import { ShowPipe } from '../pipes/show.pipe'; @Component({ selector: 'results', templateUrl: 'app/templates/results.html', pipes: [PaginatePipe, ShowPipe] }) 

Mi artículo tiene la propiedad de visible, que puede ser verdadero o falso.

Sin embargo, nada muestra, ¿hay algo mal con mi pipa?

Creo que mi tubería está funcionando porque cuando cambio el código de la tubería a:

 import { Pipe } from '@angular/core'; // Tell Angular2 we're creating a Pipe with TypeScript decorators @Pipe({ name: 'showfilter' }) export class ShowPipe { transform(value) { return value; } } 

Mostrará todos los artículos.

Gracias

Estoy bastante seguro de que esto se debe a que tiene un valor inicial de [] para los items . Cuando luego agrega elementos a los items , la tubería no se vuelve a ejecutar.

Añadiendo pure: false debería arreglarlo:

 @Pipe({ name: 'showfilter', pure: false }) export class ShowPipe { transform(value) { return value.filter(item => { return item.visible == true; }); } } 

pure: false tiene un gran impacto en el rendimiento. Tal tubería se llama cada vez que se ejecuta la detección de cambios, lo cual es bastante frecuente.

Una forma de hacer que se llame a una tubería pura es cambiar realmente el valor de entrada.

Si lo haces

 this.items = this.items.slice(); // create a copy of the array 

Cada vez items se modifican (agregan / eliminan) los elementos, Angular reconoce el cambio y vuelve a ejecutar la tubería.

  • No se recomienda utilizar tubería impura. Voy a impactar tu rendimiento.
  • Se llamará incluso fuente no se ha cambiado.
  • Por lo tanto, la alternativa correcta es cambiar la referencia de su objeto devuelto.
 @Pipe({ name: 'showfilter' }) export class ShowPipe { transform(value) { value = value.filter(item => { return item.visible == true; }); const anotherObject = Object.assign({}, value) // or else can do cloning. return anotherObject } }