TS Observable & ng：正确的模板语法

Question

我有一个可观察的 "applicationDetail" (private applicationDetail: Observable<ApplicationDetail>;)。我像这样绑定值：

<h2 class="detailViewH2">{{ (applicationDetail | async)?.AttendeeName }}</h2>
<p>{{ (applicationDetail | async)?.AttendeeFunction }} </p>

这对我来说似乎不是正确的模板语法，没有一种方法可以普遍地说 "applicationDetail" 将是异步的并且它的所有道具都应该使用安全导航运算符吗？

Answer 1

在 Angular4 中，您可以使用 *ngIf

解决此问题

<ng-container *ngIf="(applicationDetail | async) as foo">
  <h2 class="detailViewH2">{{foo.AttendeeName }}</h2>
  <p>{{foo.AttendeeFunction }} </p>
</ng-container>

您还可以创建自己的结构指令，当表达式为假时不删除内容，但在其他情况下提供此功能。

TS Observable & ng：正确的模板语法

TS Observable & ng: proper templating syntax

angular

typescript

observable

templating