角度2 ngOnInitがエラーで2回呼び出されました

Question

角度2で奇妙なエラーが発生しました。同様のテンプレートと同様のサービスを持つ2つの同様のコンポーネントがあります。ここでは、彼らがどのように動作するかの基本です：

コンポーネント：

theData: any; 

constructor(private _theService: TheService) {} 

ngOnInit() { 
    this._theService.getData() 
     .subscribe(data => { 
      this.theData = data; 
     }); 
} 

サービス：

[ 
    {name: "Name 1"}, 
    {name: "Name 2"} 
] 

とテンプレート：これは次のように、オブジェクトの配列を返します

private _url = "http://url.net/api/Data"; 

constructor(private _http: Http) { 
} 

getData() { 
    return this._http.get(this._url) 
     .map(res => res.json()); 
} 

次のように表示されます：

次に、service/apiが1つのオブジェクトだけを返し、テンプレートが* ngForを使用しないことを除いて、上記と同じ戦略に従うページに移動するアイテムをクリックすることができます表示する項目。

ようなので、それが見えます：すべてがすべての項目を表示するときに素晴らしい作品が、私は、個々の項目にクリックしたとき、のOnInitが2回呼び出され、私は、プラットフォームにbrowser.umd.jsでエラーが出ます

theItem = {name: "Name 1"} // what the service returns 

<div>{{ theItem.name }}</div> 

テンプレートの実際には、nameのundefined（これはtheItemです）を読み取ることができないと言われています。

私は、個々の項目のテンプレートを変更することで、この問題を解決：私はそう?はそれを修正追加、問題は、データがサービスからロードされていた前に、テンプレートがレンダリングされたことだと思った最初は

<div>{{ theItem?.name }}</div> 

。しかし、ngOnInitの終了後にテンプレートが読み込まれるべきではありませんか？私の質問は、?を追加すると、なぜすべてのアイテムを読み込むときに最初のテンプレートにその必要がないのに、この問題が修正されたのですか？

ありがとうございました。

Answer 1

getは非同期であるため、実際にはデータがロードされる前にテンプレートのレンダリングが開始されます。それはサービスコールを起動し、待機しません、処理を続行します。 ?を追加すると、undefinedになり、データがロードされると適切にレンダリングされます。