Angular 6：错误类型错误：el.toLowerCase 不是函数

Posted 2023-03-05

【中文标题】Angular 6：错误类型错误：el.toLowerCase 不是函数

【英文标题】：Angular 6: ERROR TypeError: el.toLowerCase is not a function

【发布时间】：2019-01-01 16:14:27

【问题描述】：

我正在我的应用程序中创建一个简单的过滤器管道，这就是我所拥有的。

过滤组件：

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 = '';

-----------

当我运行我的应用程序并尝试搜索一些文本时，我收到以下错误

ERROR TypeError: el.toLowerCase 不是函数

我的代码有什么问题？任何帮助将不胜感激

【参考方案1】：

使用管道过滤数据不被视为“最佳做法”。相反，在您的组件中执行此操作。例如：

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

它详细说明了为什么不应该使用管道进行过滤以及执行上述过滤操作的几种不同技术。

顺便说一句……这段代码看起来很眼熟。 :-) 这是我的一个 OLD Angular v2 演讲中的代码......在我们被团队通知不建议以这种方式使用管道之前。

哦...我查看了您在另一个答案中作为评论提供的链接（该链接已被删除），并且代码与您在上面发布的不同。这是您链接中的“工作”代码：

  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。

【讨论】：

所以如果我有多个组件需要根据您的建议在我的应用程序中使用 customPipeFilter，我将需要多个本地管道而不是可重复使用的管道组件？

不。只需将此方法放入服务中，然后从需要它的任何组件中调用它。

当然欢迎您不要遵循“最佳实践”并使用过滤器。除非您的清单很长，否则您不会遇到任何实际问题。

好的，我向之前回答的人提供了参考，该方法使用您的教程在角度 2 中完美运行，因此他理解并删除了他的答案。

我更新了我的帖子，向您展示了原始代码（来自该链接）和您当前的代码。您可能删除了错误的 [] 集。不正确的不是value: any[]，而是el: any[]。尝试从其中删除[]，看看是否仍有错误。