Question

只想了解使用＆＃34;？＆＃34;角度2中模板绑定的运算符。

在我使用的项目中？绑定效果很好，但如果删除它，它就不会在视图中显示任何内容。

Statement.execute(String)

你能否告诉我不同之处，这样做是好的做法。

由于

Answer 1

当Angular在project获得分配值之前呈现视图时，会导致异常。 ?.停止评估project null或undefined的时间，这通常发生在数据被异步获取时，例如从服务器获取可能需要一段时间的时间。

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

Answer 2

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

更多信息：https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

Answer 3

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

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

方法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>

Safe Navigation in angular

Async pipe

为什么我们使用＆＃34;？＆＃34;角度2中模板绑定的运算符

3 个答案: