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などを使うことが頻繁にあるので、
サーバーからデータを取得するのを待っていると全体を表示するまでに時間がかかってしまうことが
あります。
そのとき問題になるので、データを取得していないにも関わらず「データを表示する」
という指示を与えていることです
なので「?」マークを使ってエラーを起こさないようにしてあげればデータを取得できたタイミングで
データバインディングで正常に表示できるって訳です
僕自身頻繁に使うのですが、わからないという声もいただいていたので記事にしました〜
参考記事