HTML के भीतर टाइपस्क्रिप्ट एनुम तक नहीं पहुंच सकते

Question

मैंने MyService.service.ts MyComponent.component.ts और MyComponent.component.html में उपयोग करने के लिए टाइपस्क्रिप्ट के साथ एक एनम बनाया।

export enum ConnectionResult {
    Success,
    Failed     
}

मैं आसानी से MyService.service.ts से परिभाषित एनम चर की तुलना कर सकता हूं:

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

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

मैं भी अपने 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>

कोड संकलित करता है लेकिन ब्राउज़र मुझे एक त्रुटि देता है:

अपरिभाषित की संपत्ति नहीं पढ़ सकते हैं

निम्नलिखित HTML संकेत त्रुटि लाइन के साथ:

क्या किसी को पता है कि एनम को इस तरह से संपर्क क्यों नहीं किया जा सकता है?

Answer 1

टेम्पलेट का दायरा घटक उदाहरण के सदस्यों तक सीमित है। यदि आप किसी ऐसी चीज को संदर्भित करना चाहते हैं जो वहां उपलब्ध होनी चाहिए

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

HTML में अब आप उपयोग कर सकते हैं

*ngIf="connectionResult.Success"

HTML टेम्प्लेट से Angular2 एक्सेस ग्लोबल वैरिएबल भी देखें

Comments

चूंकि मैं कोडिंग मानकों का कड़ाई से पालन कर रहा हूं, मुझे किस प्रकार का डेटा देना है, मुझे कनेक्शन के लिए देना होगा

— नसरूल भारती

मुझे नहीं पता। मैंने केवल प्लंकर में टाइपस्क्रिप्ट का उपयोग किया था और कोई प्रकार की जांच नहीं थी। मुझे उम्मीद है कि त्रुटि संदेश आपको अपेक्षित प्रकार बताता है जब आप एक असंगत का उपयोग करते हैं, है ना?

— गुंटर ज़ोचाउर

धन्यवाद, मुझे स्टैक ओवरफ्लो में एक नई बातचीत शुरू करने दें

— नसरूल भारती

हां, सिर्फ एक सादे संपत्ति के सदस्य ने मेरे लिए काम नहीं किया, लेकिन इसे एक गेट्टर के रूप में स्थापित करना काम किया।

— कोन

में के रूप में नहीं अन्य जवाब है कि आप नाम रख सकते हैं। (हालांकि अन्य समस्याएं पैदा कर सकता हूं, जिन्हें मैंने अभी तक नहीं खोजा है)

— लॉसमनोस

Answer 2

आपको इसे .tsफाइल में निम्नलिखित तरीके से लिखना होगा ।

enum Tenure { day, week, all }

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

और अब html में आप इस तरह का उपयोग कर सकते हैं

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

मुझे उम्मीद है कि यह अब और स्पष्ट है। :)

Comments

TenureType और Tenure के बीच, '=' और not ':' का उपयोग करना न भूलें, यानी टाइप करें कि इसे परिभाषित न करें। मैंने सिर्फ वो गलती की, जो @ निखिल ने लिखी थी। +1

— जैक्स

Answer 3

आप संपत्ति के रूप में बस अपने घटक में एनम जोड़ सकते हैं और अपने टेम्पलेट्स में एनम (क्वार्टर) के समान नाम का उपयोग कर सकते हैं:

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> 

यह कार्य करने का कारण यह है कि नया छिद्र मूल रूप से इस प्रकार है:

TileType: typeof TileType

Comments

यदि आप एनम का नाम आउटपुट करना चाहते हैं, जैसे कि divया mat-iconतो आपको एनम को संदर्भित करना होगा, और सीधे आइटम को नहीं। समझाने की तुलना में आसान दिखाने के लिए:<mat-icon svgIcon="{{Quarters[Quarters.Q1]}}"></mat-icon>

— लॉसमनोस

यह निश्चित रूप से सबसे साफ तरीका है

— d3vtoolsmith

Answer 4

यदि आप नीचे के रूप में परिभाषित एनम को परिभाषित करते हैं, तो आप पाठ के रूप में बाँध सकते हैं (वे मान एपीआई से आने वाले एक जस स्ट्रिंग मान को लागू नहीं करेंगे)

  export enum SomeEnum {
      Failure,
      Success,
  }

.Ts फ़ाइल

public status: SomeEnum;

.Html में

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

एक और तरीका है, कोणीय 8+ में परीक्षण किया गया है कि संख्याओं के साथ एनम हैं

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

.Ts फ़ाइल

public status: SomeEnum;

.Html में

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

Comments

मेरा मानना ​​है कि सभी एनम स्वचालित रूप से नंबर के साथ आते हैं

— सुपर आईटी लड़का