angular2から残りのAPIを呼び出すと、定義されていません。

Question

私のコードで何が間違っているのかわかりません。私は角度コードから残りのAPIを呼び出そうとしていますが、 "定義されていないプロパティ 'id'を読み取ることができません。コンポーネントで

私のコードは次のようになります。コンソールでエンドとバックエンドで

ngOnInit(): void{ 
    this.getWod(); 
    } 

    getWod(): void { 
    let id; 
    this.route.params.forEach((params: Params) => { 
     id = +params['id']; 
    }) 
    this.wodService.getWod(id).then(wod => this.wod = wod); 
    console.log(this.wod); 
    } 

、私はバックエンドが正しく呼び出されていることがわかります。コンソールでのネットワークタブを読み込む：コンポーネントのcorrospondingのHTMLページに

wod: {id: 16, name: "test name", description: "test description", wod_type_id: 3, wod_category_id: 3} 

私は単に持っている：

<div>{{wod.id}}</div> 

「未定義」の結果の上にconsole.log方法、I単にdosenどうして？ UPDATED

：

getWod(id: number): Promise<Wod>{ 
    const url = `${this.getWodUrl}/${id}`; 
    return this.http.get(url) 
     .toPromise() 
     .then(response => response.json().wod as Wod) 
     .catch(this.handleError); 
    } 

Ayのアイデア：

マイgetWodの流通サービスコードは次のようになりますか？

Answer 1

コンポーネントにdiv>初期化

<div>{{wod?.id}}</div> <!--? will stop the reference to id if wod is undefined--> 

するか、またはちょうどあなたの this.wodプロパティを変更してみてください。

getWod関数が非同期であるため、質問に表示されているconsole.logがその行から生成されたとは思われます。

あなたのサービスが正しく書かれていると仮定すると、

getWod(): void { 
    let id; 
    this.route.params.forEach((params: Params) => { 
     id = +params['id']; 
    }) 
    this.wodService.getWod(id).then(function(data){ 
     this.wod = data; 
    }); 
    } 

にあなたのコンポーネントのgetWod（）関数を変更し

、あなたは有効な応答が表示されるはずです。

Answer 2

テンプレートを既にレンダリング（またはレンダリング..）している場合、オブジェクトを作成せずにプロパティwodを宣言した場合は、今度はundefinedになります。

2つの単純なオプションは、例えば、これは直接あなたのテンプレートのいずれかになり避けるために：

<div *ngIf="wod && wod.id">{{wod.id}}</div>（またはelvisオペレータと他の回答に見られるように：<div>{{wod?.id}}</div>の代わりに、空のdivにつながります非現実的）

またはそのタイプのオブジェクトでプリセットすることができます（適切な方法は、interfaceを使用するか、特定のモデルclassという新しいオブジェクトを作成することです）。 ）。

wod: any = { id: '' }