活字鋳造JSONはas`が

Question

角度tutorialは、HTTPセクションに次の行を持って動作しません `使用角度内のオブジェクトへ：

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

なっ英雄を。 response.json().dataは次を返します。

同じことを試みました。私はサーバー側でDjangoを使用し、rest_frameworkを使用してjsonを返します。角度で 私は私のクラスを持っている：

export class MyClass { 
    name: string; 
} 

response.json()は、サーバから返されたが、次のようになります。

をので、私は何をしようとすると、次のとおりです。

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

と私のテンプレート含まれています：

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

エラーが発生しました：プロパティ 'name'が未定義です。

私は{{myObject}}にHTML {{myObject.name}}に変更

は、その後、エラーやサーバーからの応答がないと私は印刷されたサーバー[オブジェクトのオブジェクト]から レスポンスを持っています。

私のコードと角度チュートリアルの違いは何ですか？私はHow do I initialize a typescript object with a JSON objectのような答えられた質問の多くを見ましたが、私はそれがちょうどasキーワードを使用するとはるかに簡単になりたいです。

Answer 1

これはTypeScriptとは関係ありません。

Error: Cannot read property 'name' of undefined.

は実行時エラーです。ガイドから

例は、セーフガードとしてディレクティブを使用：

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

と

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

を上記のコードはしません。

myObjectがもともとundefinedの場合、コンパイラは{{myObject.name}}という式を解析できないため、エラーになります。 Safe navigator operatorは（エルビス演算子として知られている）これを回避するために使用する必要があります。

{{myObject?.name}}