刀尖内的条件操作员不起作用

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>

预期输出：

用户名：Sam

或

用户名：“'

但是输出在双引号内被打印为字符串。如何使我的代码获得正确的输出？

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>

Working Demo

Answer 2

尝试这样使用-

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

奖金提示-绑定始终总是首选为[]而不是{{}}，因为这样做会使您的模板在可读性方面更整洁。