Значение enum не оценивается должным образом в шаблоне Angular 9

Question

app.component. html

<div *ngFor="let file of files">
 <p>value : {{file.type}}</p>
 <p>bool : {{file.type === FileAccessType.ENTRY_CREATE}}
</div>

app.component.ts

export class AppComponent{
 files : FileAccess[];
 FileAccessType : FileAccessType;
}

file-access.ts

export interface FileAccess {
   path: string;
   type: FileAccessType;
   timestamp: number;
}

file-access -type.ts

export enum FileAccessType{
   ENTRY_CREATE,
   ENTRY_DELETE,
   ENTRY_MODIFY
}

логическое сравнение в шаблоне не работает должным образом

{{file.type === FileAccessType.ENTRY_CREATE}} //always gives false

ref: stackblitz

Answer 1

В app.component вы должны объявить свою переменную enum следующим образом: readonly FileAccessType = FileAccessType;

Answer 2

Angular компоненты не могут выводить типы как перечисления в HTML markdows.
Таким образом, как упоминалось в @Oleksii, вы должны объявить внутреннюю переменную для хранения типа, тогда Angular сможет вычислять из HTML и доступ к значениям перечисления.

*. html

<div *ngFor="let file of files">
    <p> Value : {{ file.type }} </p>
    <p> Bool : {{ file.type === fileType.ENTRY_CREATE }}
</div>

*. Ts

export class FilesComponent {

  fileType = FileAccessType; // Type assign
  files = [...files]; // This is just mocked data

  constructor() {}

}

Кроме того, вы можете делегировать ответственность условие для компонента, например

export class FilesComponent {

  files = [...files]; // This is just mocked data

  constructor() {}

  isCreateType = (file: FileAccess) => file.type === FileAccessType.ENTRY_CREATE;
}

Теперь вам не нужно выставлять перечисление для HTML

<div *ngFor="let file of files">
    <p>value : {{ file.type }}</p>
    <p>bool : {{ isCreateType(file) }}
</div>