¿Cómo aplicar filtros a *ngFor?

Nuestros desarrolladores estrellas han agotado sus depósitos de café, investigando día y noche por la resolución, hasta que Raúl halló la solución en Beanstalk y ahora la compartimos contigo.

Solución:

Básicamente, escribes una canalización que luego puedes usar en el *ngFor directiva.

En su componente:

filterargs = title: 'hello';
items = [title: 'hello world', title: 'hello kitty', title: 'foo bar'];

En su plantilla, puede pasar stringnúmero u objeto a su tubería para usar para filtrar en:

En tu pipa:

import  Pipe, PipeTransform  from '@angular/core';

@Pipe(
    name: 'myfilter',
    pure: false
)
export class MyFilterPipe implements PipeTransform 
    transform(items: any[], filter: Object): any 
        if (!items 

Recuerda registrar tu pipa en app.module.ts; ya no necesita registrar las tuberías en su @Component

import  MyFilterPipe  from './shared/pipes/my-filter.pipe';

@NgModule(
    imports: [
        ..
    ],
    declarations: [
        MyFilterPipe,
    ],
    providers: [
        ..
    ],
    bootstrap: [AppComponent]
)
export class AppModule  

Aquí hay un Plunker que demuestra el uso de una tubería de filtro personalizada y la tubería de corte integrada para limitar los resultados.

Tenga en cuenta (como han señalado varios comentaristas) que hay una razón por la que no hay tuberías de filtro integradas en Angular.

Muchos de ustedes tienen grandes enfoques, pero el objetivo aquí es ser genérico y definir un array tubería que es extremadamente reutilizable en todos los casos en relación con * ngFor.

callback.pipe.ts (no olvide agregar esto a la declaración de su módulo array)

import  PipeTransform, Pipe  from '@angular/core';

@Pipe(
    name: 'callback',
    pure: false
)
export class CallbackPipe implements PipeTransform 
    transform(items: any[], callback: (item: any) => boolean): any 

Luego, en su componente, debe implementar un método con la siguiente firma (elemento: cualquiera) => booleanoen mi caso por ejemplo, lo llamé filterUser, que filtra la edad de los usuarios mayores de 18 años.

su componente

@Component(
  ....
)
export class UsersComponent 
  filterUser(user: IUser) 
    return !user.age >= 18
  

Y por último, pero no menos importante, su código html se verá así:

tu html

user.name

Como puede ver, esta tubería es bastante genérica en todos array como elementos que deben filtrarse a través de una devolución de llamada. En mi caso, me pareció muy útil para *ngFor escenarios similares.

¡¡¡Espero que esto ayude!!!

matriz de código

Manera simplificada (Usado solo en arreglos pequeños debido a problemas de rendimiento. En arreglos grandes, debe hacer el filtro manualmente a través del código):

Consulte: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

@Pipe(
    name: 'filter'
)
@Injectable()
export class FilterPipe implements PipeTransform 
    transform(items: any[], field : string, value : string): any[]   
      if (!items) return [];
      if (!value 

Uso:

it

Si usa una variable como segundo argumento, no use comillas.

Te mostramos las reseñas y valoraciones de los usuarios

Tienes la posibilidad compartir este tutorial si te valió la pena.

---

---

Utiliza Nuestro Buscador