Angular模板中如何检测对象是否仅包含null值？

推荐方案：自定义管道 #

自定义管道是Angular处理模板逻辑的最佳实践之一，把检测逻辑封装成管道后，模板使用起来简洁且可复用：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'allNull' })
export class AllNullPipe implements PipeTransform {
  transform(obj: Record<string, any>): boolean {
    if (!obj) return false; // 处理对象为null/undefined的情况
    return Object.values(obj).every(val => val === null);
  }
}

在对应模块中声明该管道后，即可在模板中直接使用：

<p *ngIf="myObj | allNull">该对象的所有值都是null</p>

替代方案：组件内定义getter属性 #

如果不想创建管道，也可以在组件类里定义一个getter封装检测逻辑，模板直接绑定这个属性：

get isMyObjAllNull(): boolean {
  if (!this.myObj) return false;
  return Object.values(this.myObj).every(val => val === null);
}

模板中使用方式：

<p *ngIf="isMyObjAllNull">该对象的所有值都是null</p>

为什么模板直接写Object.values会报错？ #

Angular的模板表达式解析器有严格限制，不支持在模板中直接调用这类复杂的原生方法组合——一方面是避免频繁执行逻辑引发性能问题，另一方面是为了保障模板的可读性与安全性，因此直接编写会触发Parser Error。

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