按钮显示或隐藏内容 - 角度 BehaviorSubject答案

【问题标题】：button show or hide content - angular BehaviourSubject按钮显示或隐藏内容 - 角度 BehaviorSubject
【发布时间】：2021-11-26 14:22:41
【问题描述】：

我有一个按钮，每次点击都会显示或隐藏内容

HTML：

<button (click)="showHide()">
    {{ content$ ? 'Hide'  : 'show'  }}
</button>
<div *ngIf="content$" >
    CONTENT
</div>

TS：

readonly content$ = new BehaviorSubject<boolean>(false);
showHide(): void {
    this.content$.next(true);
}

这段代码没有任何错误，但它总是显示内容，我无法隐藏它，有什么帮助吗？

【问题讨论】：

【解决方案1】：

您好，欢迎来到 Stackoverflow！

您在BehaviorSubject 中正确设置了一个新值，并且：*ngIf="content$"您只是在检查BehaviorSubject 是否存在。

为了获得内容，您必须：

<div *ngIf="content$ | async; let content">
  CONTENT
</div>

使用let content，您可以访问主题的值，以防万一；）

您可以在AsyncPipe doc了解更多信息

【讨论】：

这有帮助，但现在我可以显示内容，但隐藏不起作用，一旦显示内容，我就无法隐藏它 -
因为你的showHide 方法只是显示它（this.content$.next(true)）。您必须自定义逻辑才能从 true 切换到 false，如下所示：this.content$.next(!this.content$.getValue())
谢谢！！！但现在我在按钮内的文本总是一样的，它不响应 content$ 转换器
您必须检查BehaviourSubject 的值，并根据它更改标签。与内容 div 非常相似

【解决方案2】：

您需要使用异步管道来读取可观察值。

<div *ngIf="content$ | async" >
 CONTENT
</div>

【讨论】：