Блог

Я добавляю угловое условие для моего MatToolTip. Сначала это работает только для назначения 1 строки

 matToolTip={{myData.name}}
  

Но мне нужно добавить условие, подобное следующему

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

Поступающие данные содержат одно или другое, никогда оба.

Я нашел другой stackoverflow, который, по словам ppl, работает следующим образом, но не в моем коде Angular 7

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

Я попытался заключить их в одинарные кавычки, но безуспешно. любая помощь приветствуется. Спасибо.

Попробуйте это:

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

Вы можете использовать директиву [matTooltipDisabled] вместо использования троичного оператора или другого более сложного решения.

Пример:

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

Вы также можете использовать интерполяцию для вызова функции typescript в классе component, которая будет выполнять сложные сценарии 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;
}