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

Question

我试图弄清楚如何实现以下目标：

我有一个 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>"标签，而不是现在只显示输入的数字。任何帮助，将不胜感激！

标签： htmljsonangular

Answer 1

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

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