Angular6：为什么不起作用？ <div * ngif =“ message $ | async”> {{message $ |异步}} </div>

Question

有人可以帮我解决这个问题吗？在<div>元素中，我想在评估Observable可用时显示该元素，并显示Observable值的内容。

请参见下面的代码：

html

<div *ngIf="message$ | async">{{message$ | async}}</div>
<button (click)="onclick()">button</button>

ts

message$ = new Subject<string>();
ngOnInit() { this.message$.next(null);}
onclick() { this.message$.next("test");}

stackblitz example

当我单击按钮时，显示<div>元素是因为*ngIf="message$ | async"被评估为true，而模板插值{{message$ | async}}没有值。

这是我不明白的地方。任何人都知道，请帮助解释，谢谢。 {{message$ | async}} dosen't work

P.S。我尝试了另外两种方法来使其工作（但仍然不了解上述问题）：

1：使用 as 语法：{{msg}};

2：使用BehaviorSubject：message $ = new BehaviorSubject（null）; it works

Answer 1

您必须在异步管道之后定义消息以使其可用：

<div *ngIf="(message$ | async) as message">{{ message }}</div>

Answer 2

这不适用于主体的原因是它是一种竞赛条件。 ngIf不会将第二个异步管道添加到DOM，并且直到主题发出其值之后才进行订阅。因此，当时没有要渲染的东西。

此方法的最大问题是您的Observable订阅了两次。例如，如果message$是一个HTTP请求，则将触发两个HTTP请求，每个异步管道一个。

对象是热门的可观察对象，因此它们不会在发出值后为预订的订户保留其值。

行为主题之所以起作用，是因为它将保留其对新订户的价值。

将值存储为模板变量（作为语法）仅具有一个订阅，因此这是它起作用的原因，并且是一种更好的处理方式。