以角度 2 解析 json 并显示正确的 html 元素答案

【问题标题】：Parsing json in angular 2 and displaying correct html element以角度 2 解析 json 并显示正确的 html 元素
【发布时间】：2019-08-14 01:33:11
【问题描述】：

我正在尝试弄清楚如何实现以下目标：

我有一个 JSON 文件，其中包含如下所示的数据：

  [
    {
    "title": "Homepage",
    "link": "somelink",
    "designer": "some designer",
    "status": "5",
    "dateupdated": "2019-02-08"    
    }    
  ]

然后我使用 ngtemplate 在 html 文档中引用这个 JSON 文件。像这样的：

<ng-template
  let-row="row"
  let-value="value"
  #statusColumnTemplate>
  {{ value }}
</ng-template>

我试图弄清楚如何从 JSON 文件中获取状态数据，然后显示一个与状态相对应的彩色圆圈。可以输入 6 种不同的状态，因此数字 1、2、3、4、5 和 6 将分别具有不同的颜色。我打算用一些css来实现圆圈。

.status1 {
    height: 15px;
    width: 15px;
    background-color: #686c73;
    border-radius: 50%;
    display: inline-block;
  }

但是，我不确定如何解析数据并显示正确的 "<span class="status1"></span>" 标记，而不是现在只显示输入的数字。任何帮助将不胜感激！

【问题讨论】：

标签： html json angular

【解决方案1】：

您正在寻找ngClass，您的代码应该类似于，

<ng-template
  let-row="row"
  let-value="value"
  [ngClass]="{
            'status1' : row.status = 1,
            'status2' : row.status = 2
         }"
  #statusColumnTemplate>
  {{ row.status}}
</ng-template>

【讨论】：

【解决方案2】：

你可以简单地使用 *ngIf

<span *ngIf="status==1" class="status1"></span>
<span *ngIf="status==2" class="status2"></span>

【讨论】：