web-dev-qa-db-fra.com

Angular 6: ERREUR TypeError: el.toLowerCase n'est pas une fonction

I am creating a simple filter pipe in my app , here is what I have .

composant de filtre:

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

    @Pipe({
      name: 'dataFilter'
    })
    export class DataFilterPipe implements PipeTransform {

      transform(value: any[], input: string) {
        if (input) {
            input = input.toLowerCase();
            return value.filter(function (el: any[]) {
                return el.toLowerCase().indexOf(input) > -1;
            });
        }
        return value;
    }

    }

voici component.html

<div class="card movies-list" id="movies-list">
  <div class="card-header movies-list_header">
    <h1>Content:  <small>Best movies of 2010's</small></h1>
  </div>
  <div class="card-body">
    <div class="row movies-list_filter">
      <div class="col-md-2">Filter By</div>
      <div class="col-md-4">
        <input type='text' [(ngModel)]="listFilter">
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h1>filterdbY: {{listFilter}}</h1>
      </div>
    </div>
    <table class="table table-striped table-responsive">
      <thead>
        <tr class="movies-list_tbheader">
          <td></td>
          <th>Title</th>
          <th>Realease</th>
          <th>Rating</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr class="movies-list_data" *ngFor="let movie of movies | dataFilter:listFilter">
          <td>
            <img *ngIf="movie.poster_path" class="thumbnail" src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}">
          </td>
          <td>{{ movie.title }}</td>
          <td>{{ movie.release_date }}</td>
          <td>{{movie.vote_average}}</td>
          <td>{{movie.overview}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

et dans component.ts j'ai déclaré la variable listFilter comme ceci:

export class MoviesComponent implements OnInit {
  listFilter = '';

-----------
}

lorsque j'exécute mon application et essaie de rechercher du texte, j'obtiens l'erreur suivante

ERREUR TypeError: el.toLowerCase n'est pas une fonction

quel est le problème avec mon code? Toute aide sera appréciée

javascriptangularhtmltypescriptbootstrap-4
5
user9964622

Il n'est pas considéré comme "meilleure pratique" d'utiliser un tuyau pour filtrer les données. Faites-le plutôt dans votre composant. Par exemple:

// Local filter
performFilter(filterBy: string): iMovie[] {
    if (filterBy) {
        filterBy = filterBy.toLocaleLowerCase();
        return this.movies.filter((movie: iMovie) =>
            movie.title.toLocaleLowerCase().indexOf(filterBy) !== -1);
    } else {
        return this.movies;
    }
}

J'ai un article de blog détaillé à ce sujet ici: https://blogs.msmvps.com/deborahk/filtering-in-angular/

Il explique pourquoi un tuyau ne doit pas être utilisé pour filtrer et plusieurs techniques différentes pour effectuer l'opération de filtrage ci-dessus.

BTW ... ce code semble vraiment familier. :-) Voici le code d'un de mes ANCIENS Angular v2 ... avant que l'équipe ne nous informe que l'utilisation de tuyaux de cette manière n'était pas recommandée.

Oh ... et j'ai regardé le lien que vous avez fourni comme commentaire dans l'autre réponse (qui a depuis été supprimé) et le code n'est PAS le même que celui que vous avez affiché ci-dessus. Voici le code "de travail" de votre lien:

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

Voici le code ci-dessus:

  transform(value: any[], input: string) {
    if (input) {
        input = input.toLowerCase();
        return value.filter(function (el: any[]) {   // <---- data type!
            return el.toLowerCase().indexOf(input) > -1;
        });
    }
    return value;
}

Notez que le type de données transmis à la fonction de filtrage est any[]. Ce devrait être simplement any.

9
DeborahK