内插的角度MatToolTip条件

Question

I am adding an angular condition for my MatToolTip. At first this following works for just 1 string assignment

matToolTip={{myData.name}}

But I need to add a condition like the following

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

The data coming in has one or the other, never both.

I found another stackoverflow which ppl says the following works but not in my Angular 7 code

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

I tried putting them in single quote but no success. any help is greatly appreciated. Thanks.

Answer 1

尝试这个：

[matTooltip]="myData.hasName ? myData.name : (myData.hasNoName? 'myData.NoNameMessage' : null)"

Answer 2

You can also use interpolation to call a typescript function on component class that will perform complex if-else scenarios. Something like this..

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

Action

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