এইচটিএমএলের মধ্যে টাইপস্ক্রিপ্ট এনামের কাছে যেতে পারে না

Question 1

আমি মাই সার্ভিস.সার্ভিস.স মাইকম্পোনমেন্ট.কম্পোনেন্ট.টিস এবং মাই কমম্পোনেন্ট.কম্পোনেন্ট.এইচটিএমএলে টাইপস্ক্রিপ্ট সহ একটি এনাম তৈরি করেছি।

export enum ConnectionResult {
    Success,
    Failed     
}

আমি মাই সার্ভিস.সার্ভিস.সেটস থেকে সহজেই একটি সংজ্ঞায়িত এনাম ভেরিয়েবলটি পেতে এবং তুলনা করতে পারি:

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

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

আমি আমার এইচটিএমএল এর মধ্যে * 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>

কোডটি সংকলন করে তবে ব্রাউজারটি আমাকে একটি ত্রুটি দেয়:

অপরিশোধিত সম্পত্তি পড়তে পারে না

নিম্নলিখিত এইচটিএমএল ইঙ্গিতটি ত্রুটিরেখার সাথে:

কেউ কি জানেন যে এনামের কাছে কেন এইভাবে যোগাযোগ করা যায় না?

Question 2

টেমপ্লেটের সুযোগটি উপাদান উপাদান সদস্যদের মধ্যে সীমাবদ্ধ। আপনি যদি কিছু উল্লেখ করতে চান তবে এটি সেখানে উপলব্ধ হওয়া দরকার

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

এইচটিএমএল এ আপনি এখন ব্যবহার করতে পারেন

*ngIf="connectionResult.Success"

এইচটিএমএল টেমপ্লেট থেকে Angular2 অ্যাক্সেস গ্লোবাল ভেরিয়েবলগুলি দেখুন See

Question 3

আপনাকে .tsফাইলটিতে নিম্নলিখিত পদ্ধতিতে লিখতে হবে ।

enum Tenure { day, week, all }

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

এবং এখন এইচটিএমএল এ আপনি এটি ব্যবহার করতে পারেন

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

আমি আশা করি এটি এখন আরও পরিষ্কার হয়ে গেছে। :)

Question 4

আপনি সম্পত্তি হিসাবে আপনার উপাদানটিতে কেবল এনাম যুক্ত করতে পারেন এবং আপনার টেম্পলেটগুলিতে এনামের একই নাম (কোয়ার্টার) ব্যবহার করতে পারেন :

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

Question 5

নীচে হিসাবে এনাম হিসাবে সংজ্ঞায়িত করা হলে আপনি পাঠ্য হিসাবে আবদ্ধ করতে পারেন (এই মানগুলি API থেকে আগত কোনও জসন স্ট্রিং মান প্রয়োগ করবে না)

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