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

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({

  selector: 'my-app',

  template: `

    <div>

      <app-project [project]="project | async"></app-project>

    </div>

  `,

})

export class App { ... }

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

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

方法3：通过*ngIf结构指令限制视图

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