ngIfはAngular Heroesチュートリアルには価値がありません

Question

テンプレートのHTMLヒーローの詳細内容を<div>で囲みます。その後、ngIf組込みディレクティブを追加し、コンポーネントのselectedHeroプロパティに設定します。

<div *ngIf="selectedHero"> 
    <h2>{{selectedHero.name}} details!</h2> 
    <div><label>id: </label>{{selectedHero.id}}</div> 
    <div> 
    <label>name: </label> 
    <input [(ngModel)]="selectedHero.name" placeholder="name"/> 
</div> 

アプリが失敗しなくなりましたし、名前のリストがブラウザに再び表示されます。

実際、ngIfディレクティブがないとアプリケーションが失敗することはありません。それをテストするために、私は入力フォームを空にして、バインドされたリストされたアイテムを空にしますが、ngIfが含まれているかどうかにかかわらず、何も起きません。

Answer 1

デモがthis exampleを使用して私のために失敗するようですが、テンプレートはモデルが定義されていないためエラーを引き起こしています。

TypeError: Cannot read property 'name' of undefined

ngIfディレクティブは、モデルが利用できない場合、要素を省略することによって、これらのエラーを防ぐことができます。 tutorialで説明したように

Answer 2

キーは、この点にあります。

のでしかし、nglfを使用するだけではありません。このシンプル selectedHeroプロパティ

でヒーロープロパティを置き換えます解決策は、選択されたプロパティをヌル値でも初期化してから関連するエラーを防ぐのに十分であるため、ngifディレクティブは役に立たないように見えます。

export class AppComponent { 
    selectedHero: Hero = { 
    id: null, 
    name: null 
}; 
}