TS Observable＆amp; ng：正确的模板语法

Question

我有一个可观察的＆＃34; applicationDetail＆＃34; （private applicationDetail: Observable<ApplicationDetail>;）。我绑定了这样的值：

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

这对我来说似乎不是正确的模板语法，并不是一种通常会说＆＃34; applicationDetail＆＃34;将是异步的，它的所有道具应该使用安全导航操作符吗？

Answer 1

在Angular4中，您可以使用*ngIf

解决此问题

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

您还可以创建自己的结构指令，当表达式为false但不提供此功能时，该指令不会删除内容。