Không thể tiếp cận enum Typescript trong HTML

Tôi đã tạo một enum với Typescript để sử dụng trong MyService.service.ts MyComponent.component.ts và MyComponent.component.html.

export enum ConnectionResult {
    Success,
    Failed     
}

Tôi có thể dễ dàng lấy và so sánh một biến enum được xác định từ MyService.service.ts:

this.result = this.myService.getConnectionResult();

switch(this.result)  
{
    case ConnectionResult.Failed:
         doSomething();
         break;
    case ConnectionResult.Success:
         doSomething();
         break;
}

Tôi cũng muốn sử dụng enum để so sánh trong HTML của mình bằng cách sử dụng câu lệnh * ngIf:

<div *ngIf="result == ConnectionResult.Success; else failed">
            <img src="../../assets/connection-success.png" height="300px" class="image-sign-style" />
</div>
<ng-template #failed>
       <img src="../../assets/connection-failed.png" height="300px" class="image-sign-style" />
</ng-template>

Mã biên dịch nhưng trình duyệt báo cho tôi lỗi:

Không thể đọc thuộc tính của undefined

Với dòng lỗi chỉ báo html sau:

Có ai biết tại sao enum không thể được tiếp cận như thế này?

Phạm vi của mẫu được giới hạn cho các thành viên cá thể thành phần. Nếu bạn muốn tham khảo một cái gì đó thì nó cần phải có sẵn ở đó

class MyComponent {
  public get connectionResult(): typeof ConnectionResult {
    return ConnectionResult; 
  }
}

Trong HTML bây giờ bạn có thể sử dụng

*ngIf="connectionResult.Success"

Xem thêm Angular2 truy cập các biến toàn cục từ mẫu HTML

Bạn sẽ phải viết nó theo cách sau trong .tstệp.

enum Tenure { day, week, all }

export class AppComponent {
    tenure = Tenure.day
    TenureType = Tenure
}

Và bây giờ trong html, bạn có thể sử dụng như thế này

*ngIf = "tenure == TenureType.day ? selectedStyle : unSelectedStyle"

Tôi hy vọng nó rõ ràng hơn bây giờ. :)

Bạn chỉ có thể thêm enum vào thành phần của mình dưới dạng thuộc tính và sử dụng cùng tên của enum (Quarters) trong các mẫu của mình:

enum Quarters{ Q1, Q2, Q3, Q4}

export class AppComponent {
   quarter = Quarters.Q1
   Quarters = Quarters
}

Trong mẫu của bạn

<div *ngIf="quarter == Quarters.Q1">I=am only visible for Q1</div> 

Lý do tại sao điều này hoạt động là vì porperty mới về cơ bản thuộc loại này:

TileType: typeof TileType

Bạn có thể liên kết dưới dạng văn bản nếu enum được xác định như bên dưới (những giá trị đó sẽ không thực thi giá trị chuỗi json đến từ API)

  export enum SomeEnum {
      Failure,
      Success,
  }

Trong tệp .ts

public status: SomeEnum;

Trong .html

<div *ngIf="status == 'Success'">

Một cách khác, đã được thử nghiệm trong Angular 8+ là có enums với các số

  export enum SomeEnum {
      Failure = 0,
      Success = 1,
  }

Trong tệp .ts

public status: SomeEnum;

Trong .html

<div *ngIf="status == 1">