Angular中使用BehaviorSubject控制不同告警展示的正确判定条件是什么

你现有代码的问题出在两点：

1. 模板中直接判断isValid$本身，它是一个BehaviorSubject实例对象，只要被初始化就永远是真值，所以成功告警初始就会一直展示，!isValid$永远为假，错误告警不会出现，就算你调用closeAlert传null也不会改变Observable本身的真值属性，所以关闭功能失效。
2. 直接用布尔值真假判断无法区分false和null两种状态，二者在隐式类型转换时都会被判定为假值，没法实现null时不展示、false时展示错误的需求。

修复方案 #

1. 优化TS代码（可选，更规范）

把多余的空订阅删掉，给BehaviorSubject加更明确的类型约束：

// 限定类型只能是布尔值或者null
isValid$ = new BehaviorSubject<boolean | null>(null);

// ngOnInit里的空订阅没有实际作用，可以直接删掉
// ngOnInit(): void {
//     this.isValid$.subscribe();
// }

closeAlert() : void {
  this.isValid$.next(null);
}

// 表单提交成功时调用：this.isValid$.next(true)
// 表单提交失败时调用：this.isValid$.next(false)

2. 修正模板判断逻辑

用Angular的async管道获取Observable发射的实际值，同时用严格等于判断区分三种状态：

<!-- 成功告警：只有值严格等于true时展示 -->
<div *ngIf="(isValid$ | async) === true" class="alert alert-success alert-dismissible fade show mt-5" role="alert">
    <!-- Success -->
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="closeAlert()"></button>
</div>

<!-- 错误告警：只有值严格等于false时展示 -->
<div *ngIf="(isValid$ | async) === false" class="alert alert-danger alert-dismissible fade show mt-5" role="alert">
    <!-- Error -->
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="closeAlert()"></button>
</div>

调整后即可完全符合需求：值为null/0时两个告警都不展示，true展示成功告警，false展示错误告警，关闭功能也能正常生效。

内容的提问来源于stack exchange，提问作者user12465572