为什么在模板绑定中使用“？”运算符？

Question

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

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

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

Answer 1

当Angular在project分配值之前渲染视图时，将导致异常。?.停止评估何时projectis null或undefined，这通常发生在异步获取数据的情况下，例如从服务器获取数据可能会花费一些时间。下次更改检测识别到更改时，将重新评估绑定。当project有一个值时，它将绑定project.category。

Answer 2

这个安全的导航运算符可防止在获取值之前渲染视图。我们可以通过以下三种方法来修复视图模板中未定义或空值的错误。显然还有其他方法。方法1：使用安全导航运算符<span class="subhead">{{project?.category}}</span>方法2：使用异步管道<span class="subhead">{{(project | async )?.category}}</span>如果要通过@Input()装饰器从应用程序组件中获取价值，则可以在应用程序组件中简化这样的代码@Component({&nbsp; selector: 'my-app',&nbsp; template: `&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <app-project [project]="project | async"></app-project>&nbsp; &nbsp; </div>&nbsp; `,})export class App { ... }您可以在子组件（例如，项目组件）中使用以下模板<span class="subhead">{{project.category}}</span>方法3：通过*ngIf结构指令限制视图<span class="subhead" *ngIf="project">{{project.category}}</span>