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

罗曼·丹尼列科

我试图呈现 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?谢谢你。

哈琳·考尔·阿罗拉

试试这个:- 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 代码。在资产文件夹中创建数据文件夹并在数据文件夹中创建 json 文件 freeId.json 文件并将 json 代码粘贴到此文件中。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从 JSON 获取特定值并在 angular2 中绑定 HTML 元素中的值

来自分类Dev

如何在函数级别获取 JSON 并在 Angular2 中的 HTML 页面上显示

来自分类Dev

Angular2:如何在angular2数据绑定中以html格式显示数据?

来自分类Dev

如何在 Angular2 中从 HTML 获取对象

来自分类Dev

如何在angular2应用程序中获取JSON数组响应数据

来自分类Dev

从 API 获取数据并在 Angular2 中迭代

来自分类Dev

如何从android中的json获取数据并在RecyclerView中显示?

来自分类Dev

如何使用TypeScript在Angular2处将html输入值解析为json数据

来自分类Dev

如何获取JSON Blob中的HTML以正确呈现?

来自分类Dev

我在 Spring Boot 中获取 JSON 数据并尝试通过 angular 将其获取到 html 页面上

来自分类Dev

从网络获取json数据并在android中列出它们

来自分类Dev

如何在angular2中获取订阅数据的值

来自分类Dev

如何从Rest API获取数据并在angular js中显示

来自分类Dev

在Angular2中从外部源获取JSON后如何显示结果

来自分类Dev

如何从 Angular2 应用程序获取 json 值

来自分类Dev

如何使用angular2检索的数据作为html标签?

来自分类Dev

通过服务将数据从一个组件获取到另一个组件并在 html 组件中呈现

来自分类Dev

Angular2:解析html标签中的数据

来自分类Dev

如何在Angular2中访问HTML视频元素

来自分类Dev

如何在Angular2中使用<html>模板?

来自分类常见问题

如何在Angular2中绑定原始HTML

来自分类Dev

如何在html中包含Angular2依赖项?

来自分类Dev

如何在Angular2中使用<html>模板?

来自分类Dev

如何通过angular2中的渲染器(或替代方法)获取类属性

来自分类Dev

如何从Angular 2中的JSON数据获取数组

来自分类Dev

变量不包含angular2中的json数据

来自分类Dev

如何从 json weather.com 文件中获取数据并在 php 中显示结果

来自分类Dev

无法从 Angular2 中的 JSON 数据子对象获取键值

来自分类Dev

如何从 Json 获取特定数据并在 Ruby on Rails 中显示在 Google 地图中

Related 相关文章

  1. 1

    如何从 JSON 获取特定值并在 angular2 中绑定 HTML 元素中的值

  2. 2

    如何在函数级别获取 JSON 并在 Angular2 中的 HTML 页面上显示

  3. 3

    Angular2:如何在angular2数据绑定中以html格式显示数据?

  4. 4

    如何在 Angular2 中从 HTML 获取对象

  5. 5

    如何在angular2应用程序中获取JSON数组响应数据

  6. 6

    从 API 获取数据并在 Angular2 中迭代

  7. 7

    如何从android中的json获取数据并在RecyclerView中显示?

  8. 8

    如何使用TypeScript在Angular2处将html输入值解析为json数据

  9. 9

    如何获取JSON Blob中的HTML以正确呈现?

  10. 10

    我在 Spring Boot 中获取 JSON 数据并尝试通过 angular 将其获取到 html 页面上

  11. 11

    从网络获取json数据并在android中列出它们

  12. 12

    如何在angular2中获取订阅数据的值

  13. 13

    如何从Rest API获取数据并在angular js中显示

  14. 14

    在Angular2中从外部源获取JSON后如何显示结果

  15. 15

    如何从 Angular2 应用程序获取 json 值

  16. 16

    如何使用angular2检索的数据作为html标签?

  17. 17

    通过服务将数据从一个组件获取到另一个组件并在 html 组件中呈现

  18. 18

    Angular2:解析html标签中的数据

  19. 19

    如何在Angular2中访问HTML视频元素

  20. 20

    如何在Angular2中使用<html>模板?

  21. 21

    如何在Angular2中绑定原始HTML

  22. 22

    如何在html中包含Angular2依赖项?

  23. 23

    如何在Angular2中使用<html>模板?

  24. 24

    如何通过angular2中的渲染器(或替代方法)获取类属性

  25. 25

    如何从Angular 2中的JSON数据获取数组

  26. 26

    变量不包含angular2中的json数据

  27. 27

    如何从 json weather.com 文件中获取数据并在 php 中显示结果

  28. 28

    无法从 Angular2 中的 JSON 数据子对象获取键值

  29. 29

    如何从 Json 获取特定数据并在 Ruby on Rails 中显示在 Google 地图中

热门标签

归档