html - 根据 JSON 文件数据更改跨度类标题

Question

我的目标是使用 span 类的 title 属性生成工具提示，但标题内容根据 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>

显然，使用这段代码，无论标题中传递什么类颜色，都是相同的。理想情况下，我希望每个类(class)的标题中都有不同的消息，但我不确定如何执行此操作。

非常感谢任何帮助!

Answer 1

所以你有两种可能性来实现这一目标:

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>