首页 文章

带接口的Angular http请求：statusText：“未知错误”

提问于
浏览 次
0

我试图通过使用接口在Angular中调用示例API（https://jsonplaceholder.typicode.com/posts） .

但是我收到以下错误 . ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

我的TS文件的代码如下

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';

interface Post {
  title: string;
  body: string;
};

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {


  constructor(public navCtrl: NavController, private http: HttpClient) {

  }

  ionViewDidLoad() {

    this.getData();

  }

  getData() {
    this.http.get<Post>('https://jsonplaceholder.typicode.com/posts').subscribe(res => {
      let postTitle = res.title;
      console.log(postTitle);
    });
  }

}
json angular typescript http

3 回答

  • 1

    API返回 Post Array . 尝试：

    getData() {
  this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts').subscribe(res => {
    let postTitle = res[0].title;
    console.log(postTitle);
  });
}

    HTH

    回复于
  • 0

    好吧，你的代码有一些问题，一个res是数组类型，如果你想访问你的对象属性，你将不得不循环它（也许像这样:)

    let postTitle = [];
this.http.get<Post>('https://jsonplaceholder.typicode.com/posts').subscribe(res => {
  res.forEach(element => {
  postTitle.push(element);
});
  console.log(postTitle);
});

    我强烈建议通过服务调用API，不要在组件中执行 .

    回复于
  • 1

    所以我试着用https://stackblitz.com/edit/angular-njzmwr复制这个

    我发现了一个问题，你当前的api将数据作为一个数组返回，所以要么通过数组中的过滤器来选择数据，要么是其他东西 . 请检查上述URL

    回复于

相关问题