错误类型错误：无法读取管道未定义的属性“toLowerCase”答案

【问题标题】：ERROR TypeError: Cannot read property 'toLowerCase' of undefined for Pipe错误类型错误：无法读取管道未定义的属性“toLowerCase”
【发布时间】：2020-12-13 23:11:13
【问题描述】：

我在标题中有这个管道和这个错误。

如果数组中的任何值为undefined 是可以的，但如何避免此错误？

export class MusclePipe implements PipeTransform {
  transform(muscle, searchTerm: string): MuscleComponent {
    if (!muscle || !searchTerm) {
      return muscle;
    }

    return muscle.filter(
      (muscle) =>
        muscle.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
    );
  }
}

【问题讨论】：

标签： javascript angular pipe

【解决方案1】：

通常，这意味着您正在迭代的一个或多个muscle 对象上不存在name 属性。

理想情况下，您希望确保数据存在。但是在您的情况下，如果有可能不存在，最简单（也是最低限度正确）的方法是在可能是可选的键之后使用可选链接 (?.)：

  transform(muscle: [], searchTerm: string): MuscleComponent { 
....

    return muscle.filter(muscle => 
       muscle.name?.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1); 
    }
  }

（注意muscle.name之后的?）。

但是由于您正在调用方法，您可以执行以下操作：

    return muscle.filter(muscle => {
       muscle.name && searchTerm
         ? muscle.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)
         : 'alternative return value';
       }
    }

这里我们使用三元运算符 (if..else) 显式检查值并返回替代值。我还添加了对searchTerm 的检查是否也可能未定义：

muscle.name && searchTerm

【讨论】：

【解决方案2】：

您还应该检查一下肌肉没有正确定义name 属性，因为这似乎是您遇到的错误。

export class MusclePipe implements PipeTransform {
  transform(muscle, searchTerm: string): MuscleComponent {
    if (!muscle || !muscle.name || !searchTerm) {
      return muscle;
    }

    return muscle.filter(
      (muscle) =>
        muscle.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
    );
  }
}

【讨论】：

【解决方案3】：

在调用.toLowerCase之前在管道中添加一个空/未定义检查以检查字符串是否为空

if (str === undefined) return [];

【讨论】：