如何在ngrx/store中处理含<或>的条件？解决ngtsc(2531)报错

错误原因：async管道在Observable未发出值、或发出null/undefined时，会返回null，直接和数字比较会触发Object is possibly 'null'的类型错误。

方案1：使用空值合并运算符设置默认值 #

通过??给async管道的结果设置默认值（比如0），确保始终是数字类型再做比较：

<div class="d-flex m-0 p-0 mt-2"
     [ngClass]="{'justify-content-end': (howMoreSameBook$ | async) ?? 0 < 2,
       'justify-content-between' : (howMoreSameBook$ | async) ?? 0 > 1}">

  <p *ngIf="(howMoreSameBook$ | async) ?? 0 > 1" 
     class="d-flex align-items-center m-0 p-0" 
     [ngStyle]="{'font-weight': 'bold'}">

方案2：用模板变量缓存async结果（推荐） #

在父容器上通过*ngIf将async的结果赋值给模板变量，既避免多次订阅Observable，又确保只有值存在时才渲染内容，从根源解决null问题：

<div *ngIf="(howMoreSameBook$ | async) as count" 
     class="d-flex m-0 p-0 mt-2"
     [ngClass]="{'justify-content-end': count < 2,
       'justify-content-between' : count > 1}">

  <p *ngIf="count > 1" 
     class="d-flex align-items-center m-0 p-0" 
     [ngStyle]="{'font-weight': 'bold'}">

这种方式更高效，因为async管道只会订阅一次Observable，同时代码更简洁易维护。

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