以角度4访问json对象并以html格式显示它

Question

我有一个json对象如下。

{
  "CandidateSchemaRows": [
    {
      "Description": "sadasd",
      "Experience": 1,
      "type": "selectbox"
    },
    {
      "Description": "erwerw",
      "Experience": 2,
      "type": "selectbox"
    }
  ]
}

我想在打字稿的帮助下在html页面中打印它。 ts文件中的方法应该是什么？

Answer 1

使用ngFor

 <ul *ngFor="let pers of result?.CandidateSchemaRows">
        <li>
            {{pers.Description}} {{pers.Age}} {{pers.Experience}}     
        </li>
  </ul>

<强> DEMO STACKBLITZ

Answer 2

组件代码：

@Component({
  selector: 'my-component',
  templateUrl: 'my-template.html'
})
export class MyComponent {
  let myObj = {
    "CandidateSchemaRows": [
      {
        "Description": "sadasd",
        "Experience": 1,
        "type": "selectbox"
      },
      {
        "Description": "erwerw",
        "Experience": 2,
        "type": "selectbox"
      }
    ]
  }
}

在您的HTML中：

<p>{{myObj.CandidateSchemaRows}}</p>

Angular guide

Answer 3

ts文件中的

let data = {
  "CandidateSchemaRows": [
    {
      "Description": "sadasd",
      "Experience": 1,
      "type": "selectbox"
    },
    {
      "Description": "erwerw",
      "Experience": 2,
      "type": "selectbox"
    }
  ]
}

和HTML

<ul *ngFor="let values of data?.CandidateSchemaRows;let i=index">
        <li>
            <div class="description">{{values.Description}} of {{i}}</div>
            <div class="Experience">{{values.Experience}} of {{i}}</div>
            <div class="type">{{values.type}} of {{i}}</div>     
        </li>
  </ul>