Работает ли троичный с атрибутом Dynami c в Angular?

Question

Я пытаюсь изменить идентификатор div с помощью angular, и я использую этот код:

<div [id]="'item_' + (itemName !== undefined ? itemName.replace(' ', '-').toLowerCase() : '')">

, но когда я запускаю свой тест и не определяю itemName, у меня появляются следующие ошибки:

TypeError: Cannot read property 'replace' of undefined

Итак, где моя ошибка? можно ли здесь использовать троичную форму таким образом, есть ли другой способ сделать то, что я пытаюсь сделать?

Спасибо.

Answer 1

Ваш код правильный, поэтому ошибка, вероятно, исходит из другого места. Что касается троичного оператора, вы можете упростить это, используя шаблон безопасной навигации по шаблону angular:

<div [id]="'item_' + (itemName?.replace(' ', '-').toLowerCase() || '')">

Answer 2

Один из способов - добавить в файл .ts, сделать логи генерации идентификатора c в Oninit ()

itemName? : string;

<div [id]="itemName"></div>

Answer 3

Проблема в том, что ваше выражение интерпретируется следующим образом:

itemName !== ( undefined ? itemName.replace(' ', '-').toLowerCase() : '' )

Чтобы исправить это, добавьте скобки здесь:

(itemName !== undefined) ? itemName.replace(' ', '-').toLowerCase() : ''