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

Question

I have this pipe and this error in the title.

Probably if any values from the array being undefined is ok, but how to avoid this error?

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

Usually, it means a name property doesn't exist on one or more of the muscle objects you are iterating through.

Ideally, you want to make sure data exists. But in your case, if there is a possibility that it doesn't, the easiest (and the minimally correct) way is to use optional chaining (?.) after the key that could potentially be optional:

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

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

(note the ? after muscle.name ).

But since you are chainig the method calls, you could do something like this:

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

Here we are using the ternary operator (if..else) to explicitly check for the value and return an alternative value. I also added the check for the searchTerm is it may potentially be undefined too:

muscle.name && searchTerm

Answer 2

You should also include a check in case the muscle doesn't have the name property defined correctly as it appears this is the error you have.

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

Add a null/undefined check in your pipe to check if the string is null before calling .toLowerCase

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