Angular MatToolTip插值表达式中的条件

Question

我正在为我的MatToolTip添加一个Angular条件。 首先，以下内容仅适用于一个字符串赋值。

matToolTip={{myData.name}}

但我需要添加以下条件

matToolTip={{ myData.hasName : myData.name, myData.hasNoName : myData.NoNameMessage }}

这里的数据只有一个，要么是这个，要么是那个。

我在另一个stackoverflow上找到了一个解决方法，但在我的Angular 7代码中并不起作用。

{{element.source == 1 ? 'upwork' : (element.source == 2 ? 'refer from friend' : '')}}

我尝试使用单引号，但没有成功。非常感谢您的帮助。谢谢。

- c0micrage

Answer 1

尝试这个： [matTooltip]="如果（myData.hasName）{myData.name} else 如果（myData.hasNoName）{'myData.NoNameMessage'} else {null}"

- Nadhir Falta

---

如果mat-button被禁用，它就无法工作，该死。难道是因为它们都有[disabled]输入吗... - O-9

Answer 2

你可以使用[matTooltipDisabled]指令来代替使用三元运算符或其他更复杂的解决方案。

一个例子：

<mat-icon matTooltip="It's closed."
  [matTooltipDisabled]="entity.isOpen == true">
    close
</mat-icon>

- otaviodecampos

---

在我看来，最佳答案是查看此处有关 matTooltipDisabled 属性的官方文档：https://material.angular.io/components/tooltip/api - Wilt

Answer 3

您还可以使用插值在组件类上调用TypeScript函数，执行复杂的if-else场景。就像这样...

<button mat-raised-button
    matTooltip={{getToolTip(source)}}
    >

动作

getToolTip(source)  
{
var tooltip = '';
if(source==1)
{
  tooltip = 'upwork';
}
else
{
  if(source==2){
    tooltip = 'refer from friend';
  }
}
return tooltip;
}

- Obaid

---

谢谢。Angular 仅需一行代码，而 TypeScript 则需要更多的代码行数。数据已经存在，我只是在处理正确的语法。我希望代码尽可能保持简洁。 - c0micrage

这就是为什么我提到了“复杂的if-else场景” :-) - Obaid

您应该避免在模板中使用函数，并使用管道代替。 - Bastien