时间戳

首页 > 解决方案 > 根据 JSON 文件数据更改 span 类标题

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

问题描述

我的目标是使用跨度类的标题属性生成工具提示，但要根据跨度类更改标题内容。

今天，我有一个具有状态属性的 JSON 文件，它用状态颜色（例如灰色、蓝色、橙色等）表示。例子：

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

然后我使用角度来显示这些数据。这是状态列：

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

显然，有了这段代码，无论在标题中传递什么类颜色都将是相同的。理想情况下，我希望每个课程的标题中都有不同的信息，但我不确定如何做到这一点。

任何帮助是极大的赞赏！

标签： htmlcssjsonangular

解决方案

因此，您有两种可能性来实现这一目标：

  1. 您可以将您的条件直接写入title-tag，如下所示：
<span class="{{ value }}" [title]="value === 'something' ? 'Tooltip on match' : 'Tooltip on else'">
</span>
  1. *ngIf您可以使用结构指令有条件地编写整个跨度：
<span *ngIf="value === 'something'" class="{{ value }}" title="First Tooltip">
</span>
<span *ngIf="value !== 'something'" class="{{ value }}" title="Second Tooltip">
</span>

推荐阅读