Fehler TypError: Kann Eigenschaft 'Name' von undefined nicht lesen

Question

Ich lerne, wie man HTTPClientModule in Angular 4.3 Ich habe in app.module.ts korrekt importiert und ich versuche, eine http Request GET zu machen. Das ist meine 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>) 
    }); 

    } 

} 

Warum data.card ist undefined? Wie kann ich hier auf das Element des Objekts zugreifen, um es dann in ein Array von Karten zu übertragen? Danke für jede Hilfe

Answer 1

Die API gibt Array von Objekten zurück, aber Ihre Card Schnittstelle definiert Objekt mit card Eigenschaft. Sie müssen Schnittstelle verwenden, die die Antwort beschreiben wird, wie folgt aus:

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

Oder noch einfacher Ansatz:

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

Versuch map Methode zusammen mit json Methode hinzufügen, kurz bevor abonnieren:

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