为什么用“？”模板绑定中的运算符？答案

【问题标题】：Why use "?" operator in template binding?为什么用“？”模板绑定中的运算符？
【发布时间】：2017-02-21 10:01:27
【问题描述】：

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

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

你能告诉我区别吗？以这种方式使用它是一种好习惯吗？

【问题讨论】：

这也适用于 hero?.name。在此处添加评论，以便搜索会找到此问题。
project && project.category

标签： angular

【解决方案1】：

当 Angular 在 project 获得赋值之前渲染视图时，它会导致异常。当project 是null 或undefined 时，?. 停止评估，这通常发生在异步获取数据时，例如从服务器获取可能需要相当长的时间。

下次更改检测识别更改时，将重新评估绑定。当project 有一个值时，它将绑定project.category。

【讨论】：

我们可以在数据加载之前添加一个默认值吗？
[prop]="project?.category !== null ? project.category : defaultValue"

【解决方案2】：

此安全导航运算符可防止视图在获取值之前呈现。

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

方法一：使用安全导航算子

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

方法二：使用异步管道

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

如果你是通过 @Input() 装饰器从 app 组件中获取值，你可以在 app 组件中像这样简化代码

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

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

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

方法三：在视图中通过*ngIf结构指令进行限制

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

Safe Navigation in angular

Async pipe

【讨论】：

方法 2 拯救了我的一天，谢谢伙计 :)

【解决方案3】：

? 是安全导航操作员。它检查变量是null 还是undefined，这样我们的模板就不会尝试选择虚假的属性。

【讨论】：

小细节... 安全导航算子和猫王算子不一样。猫王算子指的是三元算子，和安全导航算子（我知道你知道的）是不一样的：）
@AJT_82 啊谢谢你的警告！我会删除它以免引起任何混乱。
根据维基百科，它似乎是一个猫王运算符。 Elvis operator is the ternary operator with its second operand omitted。加回来！永远不会记得称它为“安全导航运营商”。
@echonax 没问题。前段时间我受过这方面的教育，所以直到那时我自己都提到了这个错误：P 我还注意到之前有这篇博客文章使用了elvis 运算符（我之前提到过）。现在博客文章已更改，海报已使用safe navigation operator 代替：syntaxsuccess.com/viewarticle/elvis-operator-in-angular-2.0 如您所见，网址仍包含elvis 运算符，但内容已更改:)
是的，你绝对正确，相当于安全导航操作员。不过，看看它实际上是如何工作的会很有趣。如果它为各种类型返回一些默认值，那将是一个邪恶的运算符。