Angular 为什么要使用&引用；模板绑定中的运算符？

当我使用

？

时，绑定效果很好。如果我删除它，它不会在视图中显示任何内容

<span class="subhead">{{project?.category}}</span>

{{project？.category}

---

你能告诉我区别吗？这样使用是否是一种良好的做法？

？

是安全的导航操作员。它检查变量是

null

还是

undefined

，这样我们的模板就不会试图选择错误的属性

---

更多信息：

当Angular在

project

获得指定值之前渲染视图时，会导致异常<代码>？。在

项目

为

空

或

未定义

时停止计算，这通常发生在异步获取数据时，例如从服务器获取数据时，这可能需要相当长的时间

---

下次更改检测识别到更改时，将重新评估绑定。当

project

具有一个值时，它将绑定

project.category

此安全导航操作符在获取值之前阻止视图渲染

我们可以通过以下三种方法修复视图模板中未定义或空值的错误。 显然还有其他方法

方法1：使用安全导航操作员

<span class="subhead">{{project?.category}}</span>

您可以在子组件（例如项目组件）中使用以下模板

---

小细节。。。安全导航操作员与elvis操作员不同。Elvis操作符是指三元操作符，它与安全导航操作符（我知道你知道）不同：）@AJT_82啊谢谢你的警告！为了不引起任何混乱，我将删除它。根据维基百科的说法，它似乎是一个猫王运营商。把它加回去！永远不会记得叫它“安全导航操作员”。@echonax没问题。不久前我就接受过这方面的教育，所以我自己也提到了这个错误：P我还注意到有一篇博文使用了

elvis

操作符（我以前提到过）。现在博客帖子已经更改，poster使用了

安全导航操作符

：正如你所看到的，url仍然包含

猫王

操作符，但内容已经更改：）是的，你绝对正确，相当于安全导航操作符。不过，看看它到底是如何工作的会很有趣。如果它为各种类型返回一些默认值，那么它将是一个EVILES运算符。在加载数据之前，我们是否可以添加一个默认值？

[prop]=“project？”category！==null？project.category:defaultValue“

这也适用于hero？.name。在此处添加注释以便搜索将找到此问题。

project&&project.category

<span class="subhead">{{(project | async )?.category}}</span>

@Component({
  selector: 'my-app',
  template: `
    <div>
      <app-project [project]="project | async"></app-project>
    </div>
  `,
})
export class App { ... }

<span class="subhead">{{project.category}}</span>

<span class="subhead" *ngIf="project">{{project.category}}</span>