Изменить заголовок класса диапазона на основе данных файла JSON

Question

Моя цель - создать всплывающую подсказку с использованием атрибута title класса span, но изменить содержание заголовка в зависимости от класса span.

Сегодня у меня есть файл JSON с атрибутом статуса, который представлен цветом статуса (например, серый, синий, оранжевый и т. Д.).Пример:

  {
    "area":"Grouping",
    "title": "Information Architecture",
    "link": "#",
    "password": "",
    "designer": "Some Name Here",
    "status": "purple",
    "dateupdated": "2019-07-18"
  },

Затем я использую angular, чтобы показать эти данные.Вот столбец состояния:

<ng-template
  let-row="row"
  let-value="value"
  #statusColumnTemplate>
  <span class="{{ value }}" title="Test title"></span>
</ng-template>

Очевидно, что с этим кодом, независимо от того, какой цвет класса передается в заголовке, будет одинаковым.В идеале, я хотел бы иметь разные сообщения в заголовке для каждого класса, но я не уверен, как это сделать.

Любая помощь очень ценится!

Answer 1

Таким образом, у вас есть 2 возможности для достижения этой цели:

1. Вы можете записать свое условие непосредственно в title -тег так:

<span class="{{ value }}" [title]="value === 'something' ? 'Tooltip on match' : 'Tooltip on else'">
</span>

Вы можете написать все свои отрезки условно с помощью структурной директивы *ngIf:

<span *ngIf="value === 'something'" class="{{ value }}" title="First Tooltip">
</span>
<span *ngIf="value !== 'something'" class="{{ value }}" title="Second Tooltip">
</span>