如何將 BehaviorSubject 與 Observable 一起使用

Question

我有一個 div，需要添加屬性取決於商店結果。 商店按預期工作，當我單擊某個 div 時，它的值發生了變化（返回true或false ），並且在我的組件中我需要獲取更新的值，但是當我在ngOnInit中調用它時，它只工作一次而不更新。 我已經閱讀了有關BehaviorSubject的信息，但不明白如何正確地將我的 observable 轉換為它。 將不勝感激任何幫助！

這是我的代碼

html

<div class="details__header" [attr.isOpened]="isOpened ? 'opened' : 'closed'">

ts

isOpened: boolean;

constructor(private store: Store<AppState>) { }

ngOnInit(): void {
  this.store.select(selectSearchResultState).subscribe(el => this.isOpened = el);
}

我已經在 html 中嘗試了async pipe 並且它可以工作，但是我需要在我的代碼中使用這個變量，所以這對我不起作用

Answer 1

您應該像這樣將isOpened定義為 Observable：

isOpened$: Observable<boolean>;

constructor(private store: Store<AppState>) { }

ngOnInit(): void {
  this.isOpened$ = this.store.select(selectSearchResultState);
}

然后在帶有異步 pipe 的模板中使用它：

<div class="details__header" [attr.isOpened]="(isOpened$ | async) ? 'opened' : 'closed'">

在此處的文檔中有更多關於 observables 的信息。