Angular 错误类型错误：无法读取属性'；名称'；未定义的

我正在学习如何在Angular 4.3中使用HTTPClientModule 我已在app.module.ts中正确导入，正在尝试发出http请求获取。这是我的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>)
    });

  }

}

从'@angular/core'导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClient}；
接口卡{
卡片：[{
卡片类别：字符串，
成本：数量；
}];
}
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
构造函数（私有http:HttpClient）{}
ngOnInit（）：void{
this.http.get（'https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json）。订阅（数据=>{
console.log（data.card）；//返回未定义时，此操作无效
console.log（数据）；//这不起作用（正在删除）
});
}
}

为什么data.card未定义？我怎样才能访问这里的对象元素，然后将其传递到一组卡片中？

---

感谢您的帮助

API返回对象数组，但是您的

卡

接口正在使用

卡

属性定义对象。您需要使用描述响应的接口，如下所示：

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（'https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json）。订阅（数据=>{
console.log（数据[0]）；//第一张卡
console.log（数据）；//所有卡
});

或者更简单的方法：

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
});

this.http.get（'https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json）。订阅（数据=>{
console.log（数据[0]）；//第一张卡
console.log（数据）；//所有卡
});

尝试在订阅之前添加

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>)
  });

this.http.get（'https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json')
.map（res=>res.json（））
.订阅（数据=>{
console.log（data.card）；//返回未定义时，此操作无效
console.log（数据）；//这不起作用（正在删除）
});

你能用这个问题发布你的HTML模板吗？在我的angular项目中，我使用Http而不是HttpClient，也许它对你有帮助？Http已经（或将要）被弃用，HttpClient是现在的方向…@rinukkusu是对的，如果这不是你的域，你需要采取额外的措施来允许与它通信。检查订阅的第二个参数（这是一个错误参数）。还要查看

devtools

以了解发生了什么。如果不是CORS，访问远程站点可能会出现某种错误。CORS不是问题，只是尝试了一下。HttpClient的响应没有

json

方法。它将自动为您解析JSON响应（除非您告诉它不要这样做）。对不起，我的错误，与旧的HttpModule混淆为了方便起见，我创建了一个plunker，它只显示建议的第一张卡@MartinAdámekThanks！！！这确实解决了问题。我意识到卡接口有一些问题，但我不知道为什么。