Typoskript Gießen json zum Objekt in Winkeln mit `as` nicht

Question

Angular tutorial hat die folgende Zeile in dem HTTP-Abschnitt funktioniert:

response => response.json().data as Hero 

als Held zu bekommen. response.json().data gibt folgendes zurück:

Ich habe versucht, das Gleiche zu tun. Ich benutzte Django auf der Serverseite und gebe json unter Verwendung rest_framework zurück. In Angular ich habe meine Klasse:

export class MyClass { 
    name: string; 
} 

response.json() vom Server zurück sieht die folgende Art und Weise:

so versuche ich zu tun, was:

myObject: MyClass; 

ngOnInit(): void { 
    this.getResponseFromServer().then(myObject => this.myObject = myObject); 
} 

getResponseFromServer(): Promise<MyClass> { 
    return this.http.get("http://127.0.0.1:8000/myurl/") 
     .toPromise() 
     .then(response => response.json() as MyClass) 
     .catch(this.handleError); 
} 

und meine Vorlage enthält:

<ion-card> 
    <ion-card-header> Card Header </ion-card-header> 
    <ion-card-content> 
     Response from server {{myObject.name}} 
    </ion-card-content> 
</ion-card> 

und ich bekomme Fehler: Kann Eigenschaft 'Name' von undefined nicht lesen.

Wenn ich in html {{myObject.name}}-{{myObject}} ändern, dann gibt es keine Fehler und Antwort vom Server und ich habe Antwort vom Server [object Object] gedruckt.

Die Frage ist also, was ist der Unterschied zwischen meinem Code und eckigen Tutorial? Ich habe viele beantwortete Fragen wie How do I initialize a typescript object with a JSON object gesehen, aber ich möchte es viel einfacher mit nur as Schlüsselwort.

Answer 1

Dies hat nichts mit TypeScript zu tun.

Error: Cannot read property 'name' of undefined.

ist Laufzeitfehler.

Das Beispiel aus dem Handbuch werden Richtlinien als Garantien:

<div *ngIf="hero"> 
    <h2>{{hero.name}} details!</h2> 
    ... 
</div> 

und

<a *ngFor="let hero of heroes" ...> 
    <div class="module hero"> 
     <h4>{{hero.name}}</h4> 
    </div> 
    </a> 

Während der obige Code nicht der Fall ist.

Wenn myObject ursprünglich undefined ist, verhindert nichts Compiler von {{myObject.name}} Ausdruck, daher der Fehler. Safe navigator operator (auch bekannt als Elvis-Operator) sollten diese verwendet werden, um zu vermeiden:

{{myObject?.name}}