在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

角度组件无法将类型推断为HTML markwindows的枚举
因此，正如@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>