Ionic 4 родной http получить пустые данные в формате HTML - PullRequest
Новая
       27

Ionic 4 родной http получить пустые данные в формате HTML

0 голосов
/ 01 февраля 2019

Я новичок в ionic 4. И я пытаюсь получить данные json из API, используя собственный http.Мой код работает нормально с ответом данных 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 response 

 {{object}}

enter image description here

, но если я хочу получить данные формы заголовка, json я получил пустую страницу 

 {{object.title}}

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Немного покопавшись в документации, прежде всего, то, что возвращает native 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 я обнаружил, что ответ, возвращаемый собственным http, действительно является строкой!

docs Функция успеха получает объект ответа с 4 свойствами: статус, данные, URL и заголовки.статус - это код ответа HTTP в виде числового значения. данные - это ответ от сервера в виде строки .url - это окончательный URL, полученный после любого перенаправления в виде строки.Заголовки - это объект с заголовками.

Итак, вам нужно разобрать ответ! 

 this.http.get('https://jsonplaceholder.typicode.com/todos/1',{},{})
   .then(data => {
     this.object = JSON.parse(data.data)
   });
0 голосов
/ 01 февраля 2019

Здесь есть несколько вещей.Если вы используете angular и хотите предоставить данные для своего HTML-кода, вам понадобится декоратор @component в верхней части этого класса.

Внутри этого декоратора вы добавите несколько метаданных.Частью этих метаданных будет ссылка на папку вашего HTML-шаблона, которым вы хотите управлять с помощью этого теперь компонента.Ваш html не знает о данных в этом классе, потому что они никак не связаны друг с другом, что может понять angular.

Я бы попробовал кое-что ближе к этому: 

@Component({
  selector: 'my-page-selector',
  templateUrl: './myPage.component.html',
  styleUrls: ['./myPage.component.css']
})
export class HomePage {

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

    this.object = data.data

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

Тогда у вас будет html-файл 'myPage.Component.html', который затем сможет узнать о его компоненте управления.

<div>
{{object.title}}
</div>

Я бы посмотрел угловую документацию и ознакомился с угловым CLI.Это поможет вам создавать компоненты и шаблоны вместе, и вы сможете избежать этой путаницы.

...