时间戳

首页 > 解决方案 > ionic 4 native http在html中获取空数据

angular - ionic 4 native http在html中获取空数据

问题描述

我是 ionic 4 的初学者。我正在尝试使用本机 http 从 api 获取 json 数据。我的代码在 json 数据响应中运行良好，但问题是我在 html 中有空数据

json

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

主要代码：

import { Component } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  object : any  ;
  constructor(private http: HTTP) {
   this.http.get('https://jsonplaceholder.typicode.com/todos/1',{},{})
   .then(data => {

    this.object = data

  })    .catch(error => this.object = error);
  }


}

如果我在 html 中只使用对象，他将返回 json 响应

 {{object}}

在此处输入图像描述

但是如果我想获取标题表单数据 json 我有空页面

 {{object.title}}

标签： angularnativeionic4

解决方案

深入研究一下文档，首先，原生 http返回的是：

this.http.get('http://ionic.io', {}, {})
  .then(data => {
    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);
  })
  .catch(error => {
    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);
  });

所以你的回答是data.data在上述情况下。您发布的图片让我意识到我们正在处理一个字符串！因此，深入挖掘并在cordova docs中我发现本机http返回的响应确实是一个字符串！

docs success 函数接收一个包含 4 个属性的响应对象：status、data、url 和 headers。status 是作为数值的 HTTP 响应代码。data 是来自服务器的字符串响应。url 是在任何重定向后作为字符串获得的最终 URL。headers 是带有标题的对象。

所以你需要做的是解析响应！

 this.http.get('https://jsonplaceholder.typicode.com/todos/1',{},{})
   .then(data => {
     this.object = JSON.parse(data.data)
   });

推荐阅读