Question

我在Chrome的控制台上收到此错误：

错误TypeError：无法读取属性未定义的“ toLowerCase”

在DashboardComponent.html：5上：

<div class="mdl-grid center-items">
  <div class="mdl-cell mdl-cell--4-col">
      <mat-form-field class="search-form-field">
          <input matInput type="text" name="searchCompany" placeholder="Search" [(ngModel)]="searchCompany"/>
          <button *ngIf="searchCompany" matSuffix mat-icon-button aria-label="Clear" (click)="searchCompany=''">
            <mat-icon>close</mat-icon>
          </button>
      </mat-form-field>
  </div>
</div>

这是我的CompanyFilterPipe类：

import { PipeTransform, Pipe } from "@angular/core";
import { Company } from "../../models/company.model";

@Pipe({
    name : 'companyFilter'
})
export class CompanyFilterPipe implements PipeTransform{
    transform(companies:Company[], searchCompany:String) : Company[]{
        const value = searchCompany.toLowerCase();
        if(!companies == !searchCompany){
            return companies;
        }
        return companies.filter(companies => companies.perusahaan.toLowerCase().indexOf(value) !== -1);
    }

}

我已经在app.module.ts上声明了CompanyFilterPipe，但是它不能正常工作，我该如何解决？谢谢。

Answer 1

好像perusahaan对象上的属性company未定义。尝试以Company类型声明它，或者在函数声明中使用companies:any[]声明它。另外，您还应该在过滤器内使用其他变量名称。

编辑

1）使用searchCompanies:string代替字符串

2）!companies == !searchCompany始终为true，除非两个字段中的任何一个为空，因此不会达到您的较低return语句。

3）使用companies.filter(companies =>..会发生冲突，因为您为数组和过滤器组件指定了相同的名称。像这样使用：source.pipe(filter(num => num > 5))

4）检查searchCompany是否为空。

Answer 2

管道的声明没有错。管道被触发，这就是为什么您收到与写入管道内部逻辑有关的错误的原因。

toLowerCase（）方法应仅应用于字符串。

由于错误表明它无法读取未定义的属性“ toLowerCase”，因此您需要验证发送到Pipe的输入。 toLowerCase（）已应用于“ searchCompany”和“ companies.perusahaan”两个属性，请在管道中放置一个调试器，并验证这两个属性的值均是字符串。

Answer 3

通过添加解决：

if(!searchCompany){
    return companies;
}

因此，当搜索输入为空时，我将返回公司，但是当输入具有值时，它将返回

return companies.filter(companies => companies.perusahaan.toLowerCase().indexOf(value) !== -1);

感谢帮助我的好人：）

Angular 5错误TypeError：无法读取未定义的属性“ toLowerCase”

3 个答案: