html - Angular:ngIf 无法识别枚举类型

Question

这个*ngIf:

<div *ngIf="type === FilterType.DateRangeFilter">
    ...
</div>

导致错误

错误 TS2339:类型“FilterComponent”上不存在属性“FilterType”

即使枚举类型 FilterType 已导入组件中:

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

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {

  constructor(private type : FilterType) {
  }

  ngOnInit(): void {

  }

}

从这里开始:

export enum FilterType {
  DateRangeFilter, SensorSelectFilter
}

有什么想法为什么这行不通吗？

Answer 1

您的 HTML 模板无权访问在组件外部声明的变量。要解决此问题，请将枚举分配给组件范围内的变量

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

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {

  constructor(private type : FilterType) {
  }

  ngOnInit(): void {

  }
  
  filterType = FilterType

}

然后在您的模板中

<div *ngIf="type === filterType.DateRangeFilter">
    ...
</div>