navigationend - router events filter angular 5

Filtro de tubo angular 4

Question

Estoy tratando de usar una tubería personalizada para filtrar mi *ngFor loop usando un campo de entrada con ngModel. Con mi otra tubería personalizada (sortBy), funciona perfectamente bien. Sin embargo, la tubería de filtro parece hacer que no aparezca ninguno de los datos. Todavía estoy aprendiendo esto, e intenté algunas variaciones en vano:

-filter: term
-filter: {{term}}
-filter: ''term''
-filter" {{''term''}}

Así que creo que el problema puede estar en otra parte del código. Si alguien puede ayudar realmente lo apreciaría.

Aquí está mi código:

Componente HTML

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>

</div>
<h2>Please choose your favorite song: </h2>
<form id="filter">
    <label>Filter people by name:</label>
    <input type="text" name="term" [(ngModel)]="term" />
</form>


<table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Artist</th>
        <th>Likes</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let song of songs | filter:term| sortBy: ''likes''; let i  = index">
        <td>{{song.title}}</td>
        <td>{{song.artist}}</td>
        <td>{{song.likes}} 

            <i class="fa fa-heart-o" aria-hidden="true"  *ngIf="song.likes < 1"></i>
         <i class="fa fa-heart" aria-hidden="true" *ngIf="song.likes >= 1"></i>
             <i class="fa fa-plus" aria-hidden="true" (click)="addLike(i)" ></i>
            <i class="fa fa-minus" aria-hidden="true" (click)="removeLike(i)" ></i>

          </td>
      </tr>
    </tbody>
  </table>

TUBO

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

@Pipe({
    name: ''filter'',
    pure: false
})

export class FilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.id.indexOf(args[0]) !== -1);
    }
}

Módulo

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';

import { AppComponent } from ''./app.component'';
import { SortByPipe } from ''./sort-by.pipe'';
import { FilterPipe } from ''./filter.pipe'';
import { FormsModule, ReactiveFormsModule } from ''@angular/forms'';
import { Pipe, PipeTransform } from ''@angular/core''; 


@NgModule({
  declarations: [
    AppComponent,
    SortByPipe,
   FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Componente de js

import { Component } from ''@angular/core'';

@Component({
  selector: ''app-root'',
  templateUrl: ''./app.component.html'',
  styleUrls: [''./app.component.css''],
})
export class AppComponent {
  title = ''Oxcord'';
  songs = [

  {title: "Song", artist: "Artist", likes: 1},
  {title: "Chanson", artist: "Artiste", likes: 3},
  {title: "ABC", artist: "OneTwoThree", likes: 2},
  {title: "Trash", artist: "Meek Mill", likes: 0}

  ];
  addLike(input){
  this.songs[input].likes +=1;
} 
removeLike(input){
  this.songs[input].likes -=1;
} 
args="Me";
}

Answer 1

Aquí hay un plunkr de trabajo con un filtro y una tubería de clasificación. https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview

Como lo mencionó developer033 en un comentario, usted está pasando un solo valor a la tubería de filtro, cuando la tubería de filtro está esperando una matriz de valores. Le diría a la tubería que espere un solo valor en lugar de una matriz

export class FilterPipe implements PipeTransform {
    transform(items: any[], term: string): any {
        // I am unsure what id is here. did you mean title?
        return items.filter(item => item.id.indexOf(term) !== -1);
    }
}

Estoy de acuerdo con DeborahK en que las tuberías impuras deben evitarse por razones de rendimiento. El plunkr incluye registros de consola donde puede ver cómo se llama la tubería impura.

Answer 2

La firma del método de transformación cambió en algún lugar en un RC de Angular 2. Intente algo más como esto:

export class FilterPipe implements PipeTransform {
    transform(items: any[], filterBy: string): any {
        return items.filter(item => item.id.indexOf(filterBy) !== -1);
    }
}

Y si desea manejar los nulos y hacer que el filtro sea insensible, puede querer hacer algo más como el que tengo aquí:

export class ProductFilterPipe implements PipeTransform {

    transform(value: IProduct[], filterBy: string): IProduct[] {
        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
        return filterBy ? value.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
    }
}

Y NOTA: La clasificación y el filtrado en tuberías es un gran problema con el rendimiento y NO se recomiendan. Consulte la documentación aquí para obtener más información: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Answer 3

Pipes en Angular 2+ son una excelente manera de transformar y formatear datos directamente desde sus plantillas.

Las tuberías nos permiten cambiar datos dentro de una plantilla; es decir, filtrar, ordenar, formatear fechas, números, monedas, etc. Un ejemplo rápido es que puede transferir una cadena a minúsculas aplicando un filtro simple en el código de la plantilla.

Lista de tuberías incorporadas a partir de ^Examples de listas API

{{ user.name | uppercase }}

Ejemplo de versión angular 4.4.7. ng version

Tubos personalizados que aceptan múltiples argumentos.

HTML « *ngFor="let student of students | jsonFilterBy:[searchText, ''name''] "
TS   « transform(json: any[], args: any[]) : any[] { ... }

Filtrado del contenido usando un Pipe « json-filter-by.pipe.ts

import { Pipe, PipeTransform, Injectable } from ''@angular/core'';

@Pipe({ name: ''jsonFilterBy'' })
@Injectable()
export class JsonFilterByPipe implements PipeTransform {

  transform(json: any[], args: any[]) : any[] {
    var searchText = args[0];
    var jsonKey = args[1];

    // json = undefined, args = (2) [undefined, "name"]
    if(searchText == null || searchText == ''undefined'') return json;
    if(jsonKey    == null || jsonKey    == ''undefined'') return json;

    // Copy all objects of original array into new Array.
    var returnObjects = json;
    json.forEach( function ( filterObjectEntery ) {

      if( filterObjectEntery.hasOwnProperty( jsonKey ) ) {
        console.log(''Search key is available in JSON object.'');

        if ( typeof filterObjectEntery[jsonKey] != "undefined" && 
        filterObjectEntery[jsonKey].toLowerCase().indexOf(searchText.toLowerCase()) > -1 ) {
            // object value contains the user provided text.
        } else {
            // object didn''t match a filter value so remove it from array via filter
            returnObjects = returnObjects.filter(obj => obj !== filterObjectEntery);
        }
      } else {
        console.log(''Search key is not available in JSON object.'');
      }

    })
    return returnObjects;
  }
}

Agregar a @NgModule «Agregue JsonFilterByPipe a su lista de declaraciones en su módulo; Si olvida hacer esto, obtendrá un error de proveedor para jsonFilterBy . Si agrega al módulo, está disponible para todos los componentes de ese módulo.

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule, ReactiveFormsModule,
  ],
  providers: [ StudentDetailsService ],
  declarations: [
    UsersComponent, UserComponent,

    JsonFilterByPipe,
  ],
  exports : [UsersComponent, UserComponent]
})
export class UsersModule {
    // ...
}

Nombre de archivo: users.component.ts y users.component.ts se crea a partir de este enlace .

import { MyStudents } from ''./../../services/student/my-students'';
import { Component, OnInit, OnDestroy } from ''@angular/core'';
import { StudentDetailsService } from ''../../services/student/student-details.service'';

@Component({
  selector: ''app-users'',
  templateUrl: ''./users.component.html'',
  styleUrls: [ ''./users.component.css'' ],

  providers:[StudentDetailsService]
})
export class UsersComponent implements OnInit, OnDestroy  {

  students: MyStudents[];
  selectedStudent: MyStudents;

  constructor(private studentService: StudentDetailsService) { }

  ngOnInit(): void {
    this.loadAllUsers();
  }
  ngOnDestroy(): void {
    // ONDestroy to prevent memory leaks
  }

  loadAllUsers(): void {
    this.studentService.getStudentsList().then(students => this.students = students);
  }

  onSelect(student: MyStudents): void {
    this.selectedStudent = student;
  }

}

Nombre del archivo: users.component.html

<div>
    <br />
    <div class="form-group">
        <div class="col-md-6" >
            Filter by Name: 
            <input type="text" [(ngModel)]="searchText" 
                   class="form-control" placeholder="Search By Category" />
        </div>
    </div>

    <h2>Present are Students</h2>
    <ul class="students">
    <li *ngFor="let student of students | jsonFilterBy:[searchText, ''name''] " >
        <a *ngIf="student" routerLink="/users/update/{{student.id}}">
            <span class="badge">{{student.id}}</span> {{student.name | uppercase}}
        </a>
    </li>
    </ul>
</div>