包括检查 Angular 组件中的内联数组创建。html 不编译

Question

I have this enum :

export enum Status {
    SOME_VAL = "SOME_VAL",
    SOME_VAL_2 = "SOME_VAL_2",
    SOME_VAL_3 = "SOME_VAL_3";
}

and my interface :

export SomeInterface {
    status?: Status;
}

and a simple use of includes method with in-line array creation in some.component.ts :

let someVal: boolean = [Status.SOME_VAL, Status.SOME_VAL_2].includes(this.someObject.status);

works as expected. However, within the some.component.html :

<div *ngIf="[Status.SOME_VAL, Status.SOME_VAL_2].includes(someObject.status)">
    ...
</div>

gives this warning:

Argument type Status is not assignable to parameter type Status.SOME_VAL | Status.SOME_VAL_2

and doesn't compile. Converting to:

<div *ngIf="$any([Status.SOME_VAL, Status.SOME_VAL_2]).includes(someObject.status)">
    ...
</div>

gets rid of the warning, since I believe erases the method's signature, and does make the code compile, but does not work as expected, always evaluates to false without error or warning (possibly resulting in an error of which the logs I cannot see). How do I overcome this?

Update:

I do have:

Status = Status;

in my some.component.ts , so that I can reference it from html .

Answer 1

I've created an AsPipe :

@Pipe({
  name: 'as'
})
export class AsPipe implements PipeTransform {

  transform<T>(value: any, args: T): T {
    return value as T;
  }
}

and use it as follows in the template:

*ngIf="([Status.SOME_VAL, Status.SOME_VAL_2] | as: [Status]).includes(someObject.status)"

Answer 2

You need the enum instance to do that. To do that, declare a variable in.ts that holds enum reference and can be used in the.html template. For example:

In ts:

public status = Status;

In html:

<div *ngIf="[status.SOME_VAL, status.SOME_VAL_2].includes(someObject.status)">
    ...
</div>