如何存储Angular管道结果并在HTML中用于ngClass赋值

针对你的问题，我们可以通过ng-container结合*ngIf的as语法（或者Angular 17+的@let语法）来存储管道的计算结果，这样既能避免管道重复执行，又能清晰地在ngClass中引用这个结果。

具体实现代码 #

修改后的HTML模板

如果你的Angular版本低于17，用ng-container的写法：

<div *ngFor='let result of results'>
  <!-- 用ng-container暂存管道结果，不渲染额外DOM元素 -->
  <ng-container *ngIf="someArray | inArray:result.id as isPresentIndex">
    <div [ngClass]='{"myclass": isPresentIndex !== -1}'>
      {{ result.name }}
    </div>
  </ng-container>
</div>

如果是Angular 17及以上，推荐更简洁的@let语法：

<div *ngFor='let result of results'>
  <!-- 直接在模板中声明变量存储管道结果 -->
  @let isPresentIndex = someArray | inArray:result.id;
  <div [ngClass]='{"myclass": isPresentIndex !== -1}'>
    {{ result.name }}
  </div>
</div>

为什么这样能解决问题？

1. 管道结果复用：通过as或@let把管道的计算结果存储成模板变量，管道只会执行一次，避免了ngClass每次计算都重复调用管道的问题。
2. 逻辑清晰：你的inArray管道现在返回元素的索引（存在时）或-1（不存在时），所以我们只需要判断结果不等于-1，就能确定是否给元素添加myclass类。

用你的测试数据验证：

• result.id=1：管道返回0，满足0 !== -1，添加myclass
• result.id=2：管道返回1，满足条件，添加myclass
• result.id=4：管道返回-1，不满足条件，不添加类

完全符合你的预期需求。

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