Блог

У меня есть этот канал и эта ошибка в названии.

Возможно, если какие-либо значения из массива 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
    );
  }
}
 

Обычно это означает name , что свойство не существует для одного или нескольких 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 amp;amp; searchTerm
         ? muscle.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)
         : 'alternative return value';
       }
    }

 

Здесь мы используем тернарный оператор (if..else) для явной проверки значения и возврата альтернативного значения. Я также добавил проверку на searchTerm то, что оно потенциально может быть неопределенным:

muscle.name amp;amp; searchTerm

Вы также должны включить проверку на случай, если у muscle неверно 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
    );
  }
}
 

Добавьте проверку null / undefined в свой канал, чтобы проверить, является ли строка null перед вызовом .toLowerCase

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