ไม่สามารถเข้าใกล้ typescript enum ภายใน HTML

ฉันสร้าง enum ด้วย typescript เพื่อใช้ใน MyService.service.ts MyComponent.component.ts และ MyComponent.component.html

export enum ConnectionResult {
    Success,
    Failed     
}

ฉันสามารถรับและเปรียบเทียบตัวแปร enum ที่กำหนดได้อย่างง่ายดายจาก MyService.service.ts:

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

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

ฉันต้องการใช้ enum เพื่อเปรียบเทียบภายใน HTML ของฉันโดยใช้คำสั่ง * 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>

โค้ดคอมไพล์ แต่เบราว์เซอร์ทำให้ฉันมีข้อผิดพลาด:

ไม่สามารถอ่านคุณสมบัติของ undefined

ด้วยบรรทัดข้อผิดพลาดการบ่งชี้ html ต่อไปนี้:

มีใครรู้บ้างว่าทำไม enum ถึงเข้าใกล้แบบนี้ไม่ได้?

ขอบเขตของเทมเพลต จำกัด เฉพาะสมาชิกอินสแตนซ์คอมโพเนนต์ หากคุณต้องการอ้างถึงบางสิ่งจำเป็นต้องมีอยู่ที่นั่น

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

ใน HTML คุณสามารถใช้ได้แล้ว

*ngIf="connectionResult.Success"

ดูตัวแปรส่วนกลางที่เข้าถึง Angular2 ได้จากเทมเพลต HTML

คุณจะต้องเขียนมันด้วยวิธีต่อไปนี้ใน.tsไฟล์

enum Tenure { day, week, all }

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

และตอนนี้ใน html คุณสามารถใช้สิ่งนี้ได้

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

ฉันหวังว่าตอนนี้จะชัดเจนมากขึ้น :)

คุณสามารถเพิ่ม enum ให้กับส่วนประกอบของคุณเป็นคุณสมบัติและใช้ชื่อเดียวกันของ enum (Quarters) ในเทมเพลตของคุณ:

enum Quarters{ Q1, Q2, Q3, Q4}

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

ในเทมเพลตของคุณ

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

เหตุผลที่มันใช้งานได้คือ porperty ใหม่โดยพื้นฐานแล้วเป็นประเภทนี้:

TileType: typeof TileType

คุณสามารถผูกเป็นข้อความได้หาก enum กำหนดไว้ด้านล่าง (ค่าเหล่านั้นจะไม่บังคับใช้ค่าสตริง json ที่มาจาก API)

  export enum SomeEnum {
      Failure,
      Success,
  }

ในไฟล์. ts

public status: SomeEnum;

ใน. html

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

อีกวิธีหนึ่งที่ทดสอบใน Angular 8+ คือการมี enum พร้อมตัวเลข

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

ในไฟล์. ts

public status: SomeEnum;

ใน. html

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