Angular htmlで起こる TypeError: Cannot read property ‘name’ of null, undefinedの対処法

Angularのhtmlで変数を呼ぶと時々このようなエラーが起こることがあります

TypeError: Cannot read property 'name' of null
TypeError: Cannot read property 'name' of undefined

この問題はnameがnullやundefinedである状態でhtmlがレンダリングされることが問題で、
その結果としてhtmlがクラッシュしてしまいます

しかし「 ?」マークを入れてやることで、nullやundefinedの状態であったとしても
エラーを回避することができます

The current hero's name is {{currentHero?.name}}
// -> エラーが起こらない


The null hero's name is {{nullHero.name}}
// エラーが起こる
// エラー内容:  TypeError: Cannot read property 'name' of null in [null].

JavascriptはPromiseやObservableなどを使うことが頻繁にあるので、
サーバーからデータを取得するのを待っていると全体を表示するまでに時間がかかってしまうことが
あります。

そのとき問題になるので、データを取得していないにも関わらず「データを表示する」
という指示を与えていることです
なので「?」マークを使ってエラーを起こさないようにしてあげればデータを取得できたタイミングで
データバインディングで正常に表示できるって訳です

僕自身頻繁に使うのですが、わからないという声もいただいていたので記事にしました〜

参考記事

Template Syntax