HTML içindeki Typescript numarasına yaklaşılamıyor

MyService.service.ts MyComponent.component.ts ve MyComponent.component.html'de kullanmak için Typescript ile bir enum yaptım.

export enum ConnectionResult {
    Success,
    Failed     
}

MyService.service.ts'den tanımlı bir enum değişkenini kolayca alıp karşılaştırabilirim:

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

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

Ayrıca * ngIf deyimini kullanarak HTML'mde bir karşılaştırma yapmak için numaralandırmayı kullanmak istedim:

<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>

Kod derleniyor ancak tarayıcı bana bir hata veriyor:

Tanımsız özelliği okunamıyor

Aşağıdaki html gösterge hata satırı ile:

Numaralandırmaya neden bu şekilde yaklaşılamayacağını bilen var mı?

Şablonun kapsamı, bileşen eşgörünüm üyeleriyle sınırlıdır. Bir şeye atıfta bulunmak istiyorsanız, orada olması gerekir

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

HTML'de artık kullanabilirsiniz

*ngIf="connectionResult.Success"

Ayrıca bkz . HTML şablonundan Angular2 genel değişkenlere erişim

.tsDosyaya aşağıdaki şekilde yazmanız gerekecektir .

enum Tenure { day, week, all }

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

Ve şimdi html'de bunu şu şekilde kullanabilirsiniz:

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

Umarım şimdi daha nettir. :)

Enumu bileşeninize özellik olarak ekleyebilirsiniz şablonlarınızda aynı numaralandırma adını (Çeyreklik) kullanabilirsiniz:

enum Quarters{ Q1, Q2, Q3, Q4}

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

Şablonunuzda

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

Bunun işe yaramasının nedeni, yeni porperitenin temelde bu türden olmasıdır:

TileType: typeof TileType

Enum aşağıdaki gibi tanımlanmışsa metin olarak bağlanabilirsiniz (bu değerler API'den gelen bir json dizesi değerini zorlamaz)

  export enum SomeEnum {
      Failure,
      Success,
  }

.Ts dosyasında

public status: SomeEnum;

.Html olarak

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

Angular 8+ ile test edilen başka bir yol da numaralandırmalara sahip olmaktır

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

.Ts dosyasında

public status: SomeEnum;

.Html olarak

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