工具提示中的条件运算符不起作用

Question

我用 angular material 做了一个工具提示。条件评估无效。

下面是代码

<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

尝试这样使用-

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

额外提示 - 绑定总是首选 [] 而不是 {{}} ，因为这将使您的模板在可读性方面更清晰。

Answer 2

因为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