Javascript 错误类型错误：无法读取属性'；toLowerCase'；管道的未定义属性

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

如果数组中的任何值

未定义

都正常，那么可能是这样，但是如何避免此错误呢

导出类MusclePipe实现PipeTransform{
变换（肌肉，搜索词：字符串）：肌肉组件{
如果（！muscle | |！searchTerm）{
返肌；
}
回程肌滤器(
（肌肉）=>
muscle.name.toLowerCase（）.indexOf（searchTerm.toLowerCase（））！=-1
);
}
}

通常，这意味着一个或多个要迭代的

muscle

对象上不存在

名称

属性

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

  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

如果肌肉没有正确定义

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

---

在管道中添加空/未定义的检查，以在调用

.toLowerCase

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

---

这也是返回值，其中name为空。。