angular - 枚举值未在 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;
}

文件访问.ts

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

文件访问类型.ts

export enum FileAccessType{
   ENTRY_CREATE,
   ENTRY_DELETE,
   ENTRY_MODIFY
}

模板中的布尔比较没有按预期工作

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

参考：堆栈闪电战

Answer 1

在 app.component 你应该像这样声明你的枚举变量readonly FileAccessType = FileAccessType;

Answer 2

Angular 组件不能将类型推断为 HTML 标记的枚举。
因此，正如@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>