错误类型错误：无法读取未定义的属性“名称”

Question

我正在学习如何在 Angular 4.3 中使用 HTTPClientModule 我已在 app.module.ts 中正确导入，并且正在尝试发出 http 请求 GET。这是我的 app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient} from '@angular/common/http';
interface Card {
  card: [{
    cardClass: string,
    cost: number;
  }];
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}
  ngOnInit(): void {


    this.http.get<Card>('https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json').subscribe(data => {
      console.log(data.card); //This is not working returning undefined
      console.log(data); //This is not working (removing <Card>)
    });

  }

}

为什么 data.card 未定义？我如何访问对象的元素，然后将其传递到卡片数组中？ 感谢您的帮助

Answer 1

API 返回对象数组，但您的Card 接口正在使用card 属性定义对象。您需要使用将描述响应的接口，如下所示：

interface Card {
  cardClass: string;
  cost: number;
}

interface CardArray {
  [index: number]: Card;
}

this.http.get<CardArray>('https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json').subscribe(data => {
  console.log(data[0]); // first card
  console.log(data); // all cards
});

或者更简单的方法：

this.http.get<Card[]>('https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json').subscribe(data => {
  console.log(data[0]); // first card
  console.log(data); // all cards
});

Answer 2

尝试在订阅前添加map 方法和json 方法：

this.http.get<Card>('https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json')
  .map(res => res.json())
  .subscribe(data => {
    console.log(data.card); //This is not working returning undefined
    console.log(data); //This is not working (removing <Card>)
  });