Question

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

但是我遇到以下错误。 ERROR HttpErrorResponse {headers：HttpHeaders，状态：0，statusText：“未知错误”，网址：null，确定：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);
    });
  }

}

Answer 1

好吧，您的代码存在一些问题，因为一个res是Array类型的，如果您要访问objects属性，则必须遍历它（也许是这样的：）

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

并且我强烈建议您不要通过服务调用API，而不要在组件中使用它。

Answer 2

所以我试图用 https://stackblitz.com/edit/angular-njzmwr

我发现了一个问题，您当前的api正在将数据作为数组返回，因此要么通过过滤器从数组中选择数据，要么使用其他方法。请检查上述网址

Answer 3

API返回Array中的Post。试试：

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

HTH

带有接口：statusText的角度HTTP请求：“未知错误”

3 个答案: