Angular中如何绑定ngClass与Observable？模板编译报错求助

问题场景 #

想要在模板的多个标签中复用Observable变量isSidePanelVisible$的值，于是在mat-sidenav-container的[ngClass]绑定中使用了as语法，但触发了模板解析错误。

原代码 #

<mat-sidenav-container 
 [ngClass]="{'sidepanel-opened':
 ((isSidePanelVisible$ | async) as isSidePanelVisible) == true }">
</mat-sidenav-container>

报错信息 #

Uncaught (in promise): Error: Errors during JIT compilation of template for RiskWorkflowComponent: Parser Error: Missing expected ) at column 53 in [{'sidepanel-opened': ((isSidePanelVisible$ | async) as isSidePanelVisible) == true }] 

解决方法 #

方法一：用模板变量复用Observable值（推荐） #

Angular模板解析器不允许在属性绑定表达式内部用as声明变量，但可以通过*ngIf或ng-container将Observable的值赋值给模板变量，这样既能在ngClass中使用，也能在其他标签里复用：

使用*ngIf（适合容器本身需要根据值显示/隐藏的场景）

<mat-sidenav-container 
  *ngIf="isSidePanelVisible$ | async as isSidePanelVisible"
  [ngClass]="{'sidepanel-opened': isSidePanelVisible}">
</mat-sidenav-container>
<!-- 其他标签可直接引用isSidePanelVisible变量 -->

使用ng-container（适合不想影响容器显示状态的场景）

ng-container是不会渲染成DOM元素的容器，专门用来承载模板逻辑：

<ng-container *ngIf="isSidePanelVisible$ | async as isSidePanelVisible">
  <mat-sidenav-container 
    [ngClass]="{'sidepanel-opened': isSidePanelVisible}">
  </mat-sidenav-container>
  <!-- 所有需要用到isSidePanelVisible的标签都可以放在这个ng-container内部 -->
</ng-container>

方法二：简化表达式（无需复用变量时） #

如果只是在ngClass中判断状态，不需要在其他标签复用变量，可以直接去掉as语法，利用布尔值本身作为判断条件：

<mat-sidenav-container 
 [ngClass]="{'sidepanel-opened': (isSidePanelVisible$ | async) }">
</mat-sidenav-container>

解释：因为isSidePanelVisible$的输出是布尔型，直接用(isSidePanelVisible$ | async)就能触发sidepanel-opened类的添加/移除，无需额外写== true。

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