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

Question

我有这个 pipe 和标题中的这个错误。

可能如果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
    );
  }
}

Answer 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

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

Answer 3

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

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