Angular6: почему это не работает?{{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");}

Пример стекаблиц

Когда я нажимаю на кнопкуэлемент <div> отображается потому, что значение *ngIf="message$ | async" оценивается как true, а значение интерполяции шаблона {{message$ | async}} не имеет значения.

Здесь я не понимаю.Кто-нибудь знает об этом, пожалуйста, помогите объяснить, спасибо. {{message $ |async}} не работает

PS Я попробовал два других метода, чтобы заставить его работать (но все еще не понимаю вышеупомянутую проблему):

1: используйте as синтаксис: {{msg}};

2: использовать BehaviorSubject: message $ = new BehaviorSubject (null); работает

Answer 1

Причина, по которой это не работает с Субъектом, заключается в том, что это состояние гонки.NgIf не добавляет второй асинхронный канал в DOM и не подписывается до тех пор, пока субъект не выдаст свое значение.Так что нечего визуализировать в то время.

Самая большая проблема с этим подходом - ваша подписка на подписку подписывается дважды.Например, если message$ был HTTP-запрос, то два HTTP-запроса были бы запущены, по одному для каждого асинхронного канала.

Темы являются горячими наблюдаемыми, поэтому они не сохраняют свое значение для подписчика, подписавшегося послезначение было отправлено.

Тема поведения работает, потому что она сохранит свое значение для новых подписчиков.

Хранение значения в качестве переменной шаблона (как синтаксиса) имеет только одну подписку, так что этопочему это работает и это лучший способ справиться с этим.

Answer 2

Вы должны определить свое сообщение после асинхронного канала, чтобы сделать его доступным:

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