web-dev-qa-db-ja.com

Angular 6：ERROR TypeError：el.toLowerCase is not a function

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

フィルターコンポーネント：

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

    }

ここにcomponet.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>

そして、component.tsで私は次のように変数listFilterを宣言しました：

export class MoviesComponent implements OnInit {
  listFilter = '';

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

アプリを実行してテキストを検索しようとすると、次のエラーが表示されます

エラーTypeError：el.toLowerCaseは関数ではありません

私のコードの何が問題になっていますか？どんな助けも感謝します

javascriptangularhtmltypescriptbootstrap-4
5
user9964622

パイプを使用してデータをフィルタリングすることは「ベストプラクティス」とは見なされません。むしろ、コンポーネントでそれを行います。例えば：

// 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;
    }
}

これに関する詳細なブログ投稿があります： https://blogs.msmvps.com/deborahk/filtering-in-angular/

パイプをフィルターに使用してはならない理由と、上記のフィルター操作を実行するためのいくつかの異なる手法について詳しく説明しています。

ところで...このコードは本当におなじみのようです。 :-)これは、古いAngular v2の話の1つからのコードです...この方法でパイプを使用することは推奨されないというチームからの通知を受ける前のコードです。

ああ...そして私はあなたが他の答えでコメントとして提供したリンクを見ました（それはそれ以来削除されました）そしてコードはあなたが上に投稿したものと同じではありません。これがあなたのリンクからの「動く」コードです：

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

上記のコードは次のとおりです。

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

フィルター関数に渡されるデータ型はany[]です。それはanyでなければなりません。

9
DeborahK