Angular模板语法中{{hero?.name}}里的?是什么含义？

Hey there! Let me break down exactly what that little ? does in the Angular template expression {{hero?.name}}:

That ? is the Optional Chaining Operator, and it’s designed to keep your template safe from runtime errors when dealing with potentially null or undefined values. Here’s the practical breakdown:

• Think about a common scenario: your hero object might load asynchronously (like fetching data from an API). When your component first renders, hero could still be undefined because the data hasn’t arrived yet.
• If you wrote {{hero.name}} without the ?, Angular would try to access the name property of an undefined value. This would throw a nasty error: Cannot read properties of undefined (reading 'name'), which could break your app’s rendering.
• With hero?.name, Angular first checks if hero exists (meaning it’s not null or undefined). If it doesn’t exist, the expression stops evaluating immediately and returns undefined quietly—no error, just an empty spot in your template. Once hero finishes loading, it will correctly display the name property.

This operator works for method calls too! For example, {{hero?.getFullName()}} would only run the getFullName() method if hero is actually present.

内容的提问来源于stack exchange，提问作者userstack777