Условный оператор внутри подсказки не работает

Question

Я сделал подсказку с угловым материалом.Условная оценка не работает.

Ниже приведен код

<li [ngClass]="{'active': selectedPage === pages[1]}">
<a class="dot"  matTooltip="{{selectedPage == pages[4] ? User Name: ${userInputForm.value.newUserName} : ''}}" matTooltipPosition="above" matTooltipClass="tooltipFont"></a></li>

Ожидаемый результат:

Имя пользователя: Сэм

Или

Имя пользователя: ''

Но вывод выводится в виде строки внутри двойных кавычек.Как я могу сделать свой код, чтобы получить правильный вывод?

Answer 1

Поскольку User Name: является общим, отделите его, а затем добавьте оставшуюся часть с условным оператором в скобках (selectedPage == pages[4] ? userInputForm.value.newUserName : '').

Попробуйте так:

<a class="dot"  [matTooltip]="'User Name:' +  (selectedPage == pages[4] ?  userInputForm.value.newUserName : '')" matTooltipPosition="above" matTooltipClass="tooltipFont"></a>

Рабочая демоверсия

Answer 2

Попробуйте использовать вот так -

<a [matTooltip]="selectedPage == pages[4] ? 'User Name:' + userInputForm?.value?.newUserName : 'User name: -'" matTooltipPosition="above" matTooltipClass="tooltipFont"></a></li>

Бонусный совет - привязка всегда предпочтительна, чтобы она была [] вместо {{}} везде, где это возможно, поскольку это сделает ваш шаблон более чистым с точки зрения читаемостизрения.