Question

我尝试渲染JSON数据，我这样做......

@Component({
selector:'free-ip',
templateUrl:'./freeip.component.html'
})

export class FreeIpComponent implements OnInit{

getData:string[];

constructor(private http: FreeIpService){}

getFreeIp(){
this.http.getData()
  .subscribe(
    data => this.getData
    );
}

ngOnInit(){
  this.getFreeIp();
}
}

我的JSON格式......

 [{"name":"1(К2)","ipange":"85.143.77.64/26","count":14},
 {"name":"1(К2)","ipange":"109.123.184.128/26","count":31},
 {"name":" 7","ipange":"109.123.188.128/25","count":60}]

请帮帮我，如何将数据呈现给html？谢谢。

Answer 1

试试这个： - freeIpService.ts文件： -

import { Injectable } from '@angular/core';
import { Http, URLSearchParams} from '@angular/http';

export class FreeIpService {

  constructor(private http: Http) { }
  getFreeIp(){
    this.http.get('src/assets/data/freeId.json').map(response => response.json()
  }
}

FreeIpComponent.ts文件： -

import { Component, OnInit } from '@angular/core';
import { FreeIpService } from './freeIpService';

export class FreeIpComponent implements OnInit{

  getData:any;

  constructor(private FreeIpService: FreeIpService){}
  ngOnInit(){
    this.FreeIpService.getFreeIp().subscribe(response => { this.getData = response}, err => console.log(err), ()=> console.log(this.getData));    
}

创建服务文件并粘贴service.ts代码并创建组件并粘贴component.ts代码。在assets文件夹中创建数据文件夹并在数据文件夹中创建json文件freeId.json文件并在此文件中粘贴json代码。

Answer 2

您应该在数据响应时序列化或反序列化

首先，这是您的http服务

 <tr *ngFor="let item of productCategories;let rowIndex=index">
                <td class="a-center ">
                  <input type="checkbox" class="" name="table_records">
                </td>
                <td class="">{{rowIndex+1}}</td>
                <td class="">{{item.ID}}</td>
                <td class="">{{item.Name}}</td>
                <td class="">{{item.Description}}</td>
                <td class="">{{item.Status}}</td>

 </tr>

第二，这是组件中的功能实现 getAll（）{

1, 0, False

最后，这是html

False

Answer 3

使用内置的json管道在HTML中有一种更简单的渲染方式：

<pre>{{getData | json}}</pre>

Answer 4

<tr *ngFor="let item of getData">
<td>{{item.name}}</td>
<td>{{item.ipange}}</td>
<td>{{item.count}}></td>

这是我想要的）谢谢大家的帮助

angular2如何通过JSON获取数据并在html中呈现它们

4 个答案: