Angular中*ngIf识别枚举类型报错TS2339:FilterType属性不存在

Angular 组件的模板仅能访问对应组件类中声明的公开成员：

1. 你仅在组件TS文件头部导入了FilterType枚举，未将枚举绑定为组件类的公开属性，模板解析时无法识别全局的FilterType变量，因此抛出Property 'FilterType' does not exist on type 'FilterComponent'报错。
2. 额外注意：你在构造函数中声明的type参数使用了private修饰符，属于类的私有成员，同样无法直接在模板中访问，如果保留模板中type === xxx的写法，需要将其修饰符改为public。

方案1：将枚举绑定为组件公开属性（推荐，无需修改原有模板代码） #

在FilterComponent类中新增一行公开属性声明，指向导入的FilterType枚举即可：

import { FilterType } from '../filter-collection/filter-collection.component'

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {
  // 新增这一行，声明公开属性指向枚举，属性名和枚举名保持一致
  public readonly FilterType = FilterType;

  // 这里把private改成public，模板才能访问type变量
  constructor(public type : FilterType) {
  }

  ngOnInit(): void {
  }
}

修改完成后原有模板代码无需调整即可正常运行。

方案2：将判断逻辑封装到组件类方法中 #

如果你不想在组件类中额外声明枚举属性，可以把枚举判断逻辑收拢在TS层，模板仅调用公开方法获取判断结果：
首先在组件类中新增判断方法：

export class FilterComponent {
  constructor(private type : FilterType) { // 这里type可以保留private修饰符
  }

  // 新增公开判断方法
  public isDateRangeFilter(): boolean {
    return this.type === FilterType.DateRangeFilter;
  }
}

然后调整模板中的*ngIf写法：

<div *ngIf="isDateRangeFilter()">
    ...
</div>

该方案的优势是模板不需要感知枚举的存在，后续枚举值调整时仅需要修改TS层的判断逻辑即可，可维护性更高。

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