অ্যাঙ্গুলার 2 এনজিউইচ স্টেটমেন্টে টাইপস্ক্রিপ্ট এনাম মানটি কীভাবে ব্যবহার করবেন

Question

টাইপসক্রিপ্ট এনাম অ্যাঙ্গুলার 2 এর এনজিউইচ নির্দেশনার সাথে একটি প্রাকৃতিক মিল বলে মনে হচ্ছে। তবে যখন আমি আমার উপাদানগুলির টেমপ্লেটে এনাম ব্যবহার করার চেষ্টা করি তখন আমি "অপরিবর্তিত ইনফরমেশন 'এক্সএক্সএক্সএক্স' পড়তে পারি না ..."। আমি কীভাবে আমার উপাদানগুলির টেমপ্লেটে এনাম মানগুলি ব্যবহার করতে পারি?

দয়া করে মনে রাখবেন যে এনাম (এনজিফোর্ড) এর সমস্ত মানের উপর নির্ভর করে এইচটিএমএল নির্বাচন বিকল্পগুলি কীভাবে তৈরি করা যায় তার থেকে এটি আলাদা। এই প্রশ্নটি এনজিউইচ সম্পর্কিত একটি এনামের একটি নির্দিষ্ট মানের উপর ভিত্তি করে। যদিও এনামের সাথে শ্রেণিক-অভ্যন্তরীণ রেফারেন্স তৈরি করার একই পদ্ধতির উপস্থিতি ঘটে।

Comments

Angular2 এ এনামের উপর ভিত্তি করে নির্বাচনের

— গন্টার জ্যাচবাউয়ার

আমি মনে করি না যে এই প্রশ্নগুলি সদৃশ; অন্যটি জিজ্ঞাসা করছে যে এনএমএস (এনজিফোর্ড) এর সমস্ত মানের উপর ভিত্তি করে এইচটিএমএল নির্বাচন বিকল্পগুলি কীভাবে তৈরি করা যায়, অন্যদিকে এনামসুইচটি কোনও এনামের একটি নির্দিষ্ট মানের উপর ভিত্তি করে। যদিও এনামের সাথে শ্রেণিক-অভ্যন্তরীণ রেফারেন্স তৈরি করার একই পদ্ধতির উপস্থিতি ঘটে। মিল খুঁজে বের করার জন্য আপনাকে ধন্যবাদ।

— কার্ল জি

Answer 1

আপনি আপনার উপাদান শ্রেণিতে এনামের জন্য একটি রেফারেন্স তৈরি করতে পারেন (আমি সবেমাত্র প্রাথমিক চরিত্রটিকে ছোট-ছোট হিসাবে পরিবর্তন করেছি) এবং তারপরে টেমপ্লেট থেকে এই রেফারেন্সটি ব্যবহার করতে পারি ( প্লাঙ্কার ):

import {Component} from 'angular2/core';

enum CellType {Text, Placeholder}
class Cell {
  constructor(public text: string, public type: CellType) {}
}
@Component({
  selector: 'my-app',
  template: `
    <div [ngSwitch]="cell.type">
      <div *ngSwitchCase="cellType.Text">
        {{cell.text}}
      </div>
      <div *ngSwitchCase="cellType.Placeholder">
        Placeholder
      </div>
    </div>
    <button (click)="setType(cellType.Text)">Text</button>
    <button (click)="setType(cellType.Placeholder)">Placeholder</button>
  `,
})
export default class AppComponent {

  // Store a reference to the enum
  cellType = CellType;
  public cell: Cell;

  constructor() {
    this.cell = new Cell("Hello", CellType.Text)
  }

  setType(type: CellType) {
    this.cell.type = type;
  }
}

Answer 2

আপনি enums সম্পর্কে সচেতন করতে আপনার উপাদান যুক্ত করতে একটি কাস্টম ডেকোরেটর তৈরি করতে পারেন।

myenum.enum.ts:

export enum MyEnum {
    FirstValue,
    SecondValue
}

myenumaware.decorator.ts

import { MyEnum } from './myenum.enum';

export function MyEnumAware(constructor: Function) {
    constructor.prototype.MyEnum = MyEnum;
}

enum-aware.component.ts

import { Component } from '@angular2/core';
import { MyEnum } from './myenum.enum';
import { MyEnumAware } from './myenumaware.decorator';

@Component({
  selector: 'enum-aware',
  template: `
    <div [ngSwitch]="myEnumValue">
      <div *ngSwitchCase="MyEnum.FirstValue">
        First Value
      </div>
      <div *ngSwitchCase="MyEnum.SecondValue">
        Second Value
      </div>
    </div>
    <button (click)="toggleValue()">Toggle Value</button>
  `,
})
@MyEnumAware // <---------------!!!
export default class EnumAwareComponent {
  myEnumValue: MyEnum = MyEnum.FirstValue;

  toggleValue() {
    this.myEnumValue = this.myEnumValue === MyEnum.FirstValue
        ? MyEnum.SecondValue : MyEnum.FirstValue;
  }
}

Comments

এওটি সংকলক দিয়ে এই পদ্ধতিটি ব্যবহার করে কারও সাফল্য এসেছে?

— ড্যানি

@ সিমন_উইভার সাজসজ্জাগুলি মূলত ফাংশন যা কোনও পরামিতি হিসাবে ফাংশন নেয় এবং সেই ফাংশনের আচরণকে প্রসারিত করে। ES6 / 7 এর ক্ষেত্রে, আমরা ক্লাসগুলির বর্ধন / টীকাগুলি নিয়ে কাজ করছি। তারা কীভাবে কাজ করে সে সম্পর্কে একটি উচ্চ স্তরের নিবন্ধ এখানে । ES7 বাস্তবায়ন জন্য প্রস্তাব GitHub হয় - পর্যায় 2. যে প্রস্তাবে বর্তমানে তারা টেকনিক সম্ভব ব্যবহারসমূহ উপর স্পর্শ করুন। টাইপস্ক্রিপ্ট, জেএসের সুপারস্টার হিসাবে এই বৈশিষ্ট্যটি অন্তর্ভুক্ত করে।

— এরিক ইজারা

@ সিমন_উইভার এই ক্ষেত্রে, সিনট্যাকটিক চিনি কলটি লুকিয়ে রাখছে MyEnumAware(), যেখানে EnumAwareComponentউদাহরণটি পাস হয়েছে এবং এর একটি সম্পত্তি রয়েছে, MyEnumতার প্রোটোটাইপে যুক্ত হয়েছে। সম্পত্তি মান এনাম নিজেই সেট করা হয়। এই পদ্ধতিটি গৃহীত উত্তরের মতো একই কাজ করে। এটি সজ্জকারদের জন্য প্রস্তাবিত সিনট্যাকটিক চিনির সুবিধা গ্রহণ করছে এবং টাইপস্ক্রিপ্টে অনুমোদিত। কৌণিক ব্যবহার করার সময় আপনি ব্যাটের ডানদিকে ডেকরেটার সিনট্যাক্স ব্যবহার করছেন। এটা কি একটি ব্যাপার Component হল , একটি খালি ক্লাসের একটি এক্সটেনশন কৌণিক কোর শ্রেণীর সাথে যোগাযোগ করার জন্য কিভাবে জানি যে।

— এরিক ইজারা

-1: এটি আওটের সাথে কাজ করে বলে মনে হয় না, ফলস্বরূপ ERROR in ng:///.../whatever.component.html (13,3): Property 'MyEnum' does not exist on type 'EnumAwareComponent'। এটি অর্থবোধ করে, কারণ সজ্জাকারী যুক্ত করা সম্পত্তি কখনই ঘোষণা করা হয় না, টাইপস্ক্রিপ্ট সংকলককে তার অস্তিত্ব সম্পর্কে অজানা।

— মেরিটন

সুতরাং আমি এটি 4+ মাস ধরে ব্যবহার করছি। তবে, এখন যেহেতু আমি একটি --prodবিল্ড করছি (আয়নিক 3 / কৌণিক 4 / টাইপস্ক্রিপ্ট 2.4.2) এটি আর কাজ করে না। আমি ত্রুটি পেয়েছি "TypeError: Cannot read property 'FirstValue' of undefined"। আমি একটি স্ট্যান্ডার্ড সংখ্যাসূচক এনাম ব্যবহার করছি। এটি এওটি দিয়ে ভাল কাজ করে তবে তা দিয়ে নয় --prod। আমি যদি এটি এইচটিএমএলে পূর্ণসংখ্যার ব্যবহারে পরিবর্তন করি তবে এটি কাজ করে, তবে এটি বিন্দু নয়। কোন ধারনা?

— রাশ

Answer 3

এটি সহজ এবং একটি কবজির মতো কাজ করে :) কেবল আপনার এনামটিকে এটির মতো ঘোষণা করুন এবং আপনি এটি HTML টেমপ্লেটে ব্যবহার করতে পারেন

  statusEnum: typeof StatusEnum = StatusEnum;

Comments

গবেষণার দিনগুলি অবশেষে আমার কী প্রয়োজন তা খুঁজে পেল। অনেক ধন্যবাদ!

— gsiradze

@ রাহুল StatusEnumএকটি ক্লাসে সংজ্ঞায়িত হয়েছে .ts। কৌণিক উপাদানটিতে আপনি এটি আমদানি করুন, এটি কোনও উপাদান বৈশিষ্ট্যটিতে আবদ্ধ করুন (এখানে statusEnum) এবং উপাদান বৈশিষ্ট্য টেমপ্লেট থেকে অ্যাক্সেসযোগ্য।

— টম

ট্যাঙ্কগুলি দুর্দান্ত

— হাসান খাদেমি

Answer 4

Angular4 - এইচটিএমএল টেমপ্লেটে এনাম ব্যবহার করা হচ্ছে এনজিউইচ / এনজিউইচকেস

সমাধান এখানে: https://stackoverflow.com/a/42464835/802196

ক্রেডিট: @ স্নর্কপিট

আপনার উপাদান, আপনি আছে

enum MyEnum{
  First,
  Second
}

তারপরে আপনার উপাদানটিতে, আপনি কোনও সদস্য 'মাইইনুম' এর মাধ্যমে এনাম টাইপ আনবেন এবং আপনার এনাম ভেরিয়েবল 'মাইএনমওয়ার' এর জন্য অন্য সদস্য তৈরি করবেন:

export class MyComponent{
  MyEnum = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

আপনি এখন আপনার .html টেমপ্লেটে MyEnumVar এবং MyEnum ব্যবহার করতে পারেন। উদাহরণস্বরূপ, এনজিউইচ এ এনাম ব্যবহার করে:

<div [ngSwitch]="myEnumVar">
  <div *ngSwitchCase="MyEnum.First"><app-first-component></app-first-component></div>
  <div *ngSwitchCase="MyEnum.Second"><app-second-component></app-second-component></div>
  <div *ngSwitchDefault>MyEnumVar {{myEnumVar}} is not handled.</div>
</div>

Comments

আপনি কীভাবে একই উপাদানটিকে অন্য উপাদানগুলিতে পুনরায় ব্যবহার করতে পারেন?

— ফরেস্টজি

আমাকে এক্সপোর্ট এনাম মাইএনম export ...} "ব্যবহার করে একটি বাহ্যিক ফাইলের এনামটি সংজ্ঞায়িত করতে হয়েছিল। তারপর উপাদান ফাইল, আমদানি যে বহিরাগত ফাইল থেকে 'MyEnum', এবং 'এর জন্য উপরে সমাধান সঙ্গে অবিরত MyEnum = MyEnum "ইত্যাদি

— ObjectiveTC

Answer 5

আরসি .6 / ফাইনাল হিসাবে

...

export enum AdnetNetworkPropSelector {
    CONTENT,
    PACKAGE,
    RESOURCE
}

<div style="height: 100%">
          <div [ngSwitch]="propSelector">
                 <div *ngSwitchCase="adnetNetworkPropSelector.CONTENT">
                      <AdnetNetworkPackageContentProps [setAdnetContentModels]="adnetNetworkPackageContent.selectedAdnetContentModel">
                                    </AdnetNetworkPackageContentProps>
                  </div>
                 <div *ngSwitchCase="adnetNetworkPropSelector.PACKAGE">
                </div>
            </div>              
        </div>


export class AdnetNetwork {       
    private adnetNetworkPropSelector = AdnetNetworkPropSelector;
    private propSelector = AdnetNetworkPropSelector.CONTENT;
}

Comments

কি বদলে গেছে?

— কার্ল জি

ngSwitchCase- এর পরিবর্তে জন্মগ্রহণ করুন

— জন্ম

আহ ঠিক আছে. ধন্যবাদ!

— কার্ল জি

Answer 6

@ এরিক লিজের সাজসজ্জার বিকল্প হিসাবে, যা দুর্ভাগ্যক্রমে --aot(এবং এইভাবে --prod) তৈরি করে কাজ করে না , আমি এমন একটি পরিষেবা ব্যবহার করেছিলাম যা আমার অ্যাপ্লিকেশনটির সমস্ত এনামগুলিকে প্রকাশ করে। একটি সরল নামের অধীনে প্রয়োজন এমন প্রতিটি উপাদানটিতে কেবল এটি প্রকাশ্যে ইনজেক্ট করা দরকার, এর পরে আপনি নিজের মতামতগুলিতে এনামগুলিতে অ্যাক্সেস করতে পারবেন। উদাহরণ:

সেবা

import { Injectable } from '@angular/core';
import { MyEnumType } from './app.enums';

@Injectable()
export class EnumsService {
  MyEnumType = MyEnumType;
  // ...
}

এটিকে আপনার মডিউল সরবরাহকারীর তালিকায় অন্তর্ভুক্ত করতে ভুলবেন না।

উপাদান শ্রেণি

export class MyComponent {
  constructor(public enums: EnumsService) {}
  @Input() public someProperty: MyEnumType;

  // ...
}

উপাদান এইচটিএমএল

<div *ngIf="someProperty === enums.MyEnumType.SomeValue">Match!</div>

Comments

এটিকে কাজ করতে আমারও পরিষেবা পরিবর্তন করতে এবং @ ইনজেক্টেবল ({প্রদত্তIn: 'রুট'}) লিখতে হবে। ধন্যবাদ!

— স্টল্লি

Answer 7

'আমি কি সত্যিই এটি করতে চাই?' বিবেচনা করে শুরু করুন

সরাসরি এইচটিএমএলে এনামগুলিকে উল্লেখ করার ক্ষেত্রে আমার কোনও সমস্যা নেই, তবে কিছু ক্ষেত্রে এমন ক্লিনার বিকল্প রয়েছে যা টাইপ-নিরাপদ-নেসটি হারাবেন না। উদাহরণস্বরূপ আপনি যদি আমার অন্যান্য উত্তরে দেখানো পন্থাটি চয়ন করেন, আপনি নিজের উপাদানটিতে টিটিটিকে এই জাতীয় কিছু ঘোষণা করতে পারেন:

public TT = 
{
    // Enum defines (Horizontal | Vertical)
    FeatureBoxResponsiveLayout: FeatureBoxResponsiveLayout   
}

আপনার এইচটিএমএলটিতে একটি ভিন্ন লেআউট দেখানোর জন্য, আপনার *ngIfপ্রতিটি লেআউট প্রকারের জন্য একটি নকশা থাকতে হবে এবং আপনি সরাসরি আপনার উপাদানটির এইচটিএমএলে এনামকে উল্লেখ করতে পারেন:

*ngIf="(featureBoxResponsiveService.layout | async) == TT.FeatureBoxResponsiveLayout.Horizontal"

এই উদাহরণটি বর্তমান লেআউটটি পেতে একটি পরিষেবা ব্যবহার করে, এটি অ্যাসিঙ্ক পাইপ দিয়ে চালায় এবং তারপরে এটি আমাদের এনাম মানের সাথে তুলনা করে। এটি বেশ ভার্জোজ, সংশ্লেষিত এবং দেখতে খুব মজাদার নয়। এটি এনামের নামটিও প্রকাশ করে, যা নিজে অতিরিক্ত মাত্রায় ভার্জোজ হতে পারে।

বিকল্প, এটি এইচটিএমএল থেকে টাইপ সুরক্ষা বজায় রাখে

বিকল্পভাবে আপনি নিম্নলিখিতটি করতে পারেন, এবং আপনার উপাদানগুলির .ts ফাইলে আরও পাঠযোগ্য ফাংশন ঘোষণা করতে পারেন:

*ngIf="isResponsiveLayout('Horizontal')"

অনেক ক্লিনার! তবে কেউ যদি 'Horziontal'ভুল করে টাইপ করে? আপনি এইচটিএমএলে এনাম ব্যবহার করতে চেয়েছিলেন তার পুরো কারণটি কি টাইপসেফ হওয়া উচিত?

আমরা কীওফ এবং কিছু টাইপ স্ক্রিপ্ট যাদু দ্বারা এখনও এটি অর্জন করতে পারি । এটি ফাংশনটির সংজ্ঞা:

isResponsiveLayout(value: keyof typeof FeatureBoxResponsiveLayout)
{
    return FeatureBoxResponsiveLayout[value] == this.featureBoxResponsiveService.layout.value;
}

ব্যবহারের দ্রষ্টব্য FeatureBoxResponsiveLayout[string]যা পরিবর্তন করে enum এর সাংখ্যিক মান জন্য পাস করতে স্ট্রিং মান।

আপনি যদি কোনও অবৈধ মান ব্যবহার করেন তবে এটি একটি এওটি সংকলন সহ একটি ত্রুটি বার্তা দেবে।

"H4orizontal" "প্রকারের আর্গুমেন্টটি" "উল্লম্ব" টাইপের প্যারামিটারে নির্ধারিত নয় "অনুভূমিক"

বর্তমানে ভিএসকোড H4orizontalএইচটিএমএল সম্পাদকটিতে আন্ডারলাইন করার জন্য যথেষ্ট স্মার্ট নয় তবে সংকলনের সময় আপনি এই সতর্কতাটি পাবেন (- প্রোড বিল্ড বা --আওট স্যুইচ সহ) with ভবিষ্যতের আপডেটে এটিরও উন্নতি হতে পারে।

Comments

আমি ভিতরে ধ্রুবক পছন্দ করি তা নিশ্চিত নই তবে আমি htmlআপনার বক্তব্যটি দেখতে পেয়ে এটি ব্যবহার শুরু করেছি; এটি কাজ করে, ভাল পুরানো দিন হিসাবে, সংকলন যখন! :)

— জেনুইনফাফা

@ জেনুইনফফা এই পদ্ধতির মাধ্যমে এনামকে নিজেই এইচটিএমএল থেকে বের করে আনতে হবে তবে এখনও এনাম মানগুলি পরীক্ষা করতে দেওয়া হচ্ছে। আমি মনে করি আপনি বলতে পারেন যে এটি টিএসএস থেকে এইচটিএমএলকে ডেস্পল করে তবে এটি নিজেই কোনও আসল সুবিধা দেয় না কারণ তারা সবসময় একসাথে ব্যবহৃত হয়।

— সাইমন_উইভার

আমি টাইপ চেক পছন্দ করি, বিশেষত স্বয়ংক্রিয়ভাবে পরীক্ষিত বিকাশে

— জেনুইনফফা

"আমি কি আসলেই এটি করতে চাই?" বিবেচনা করে শুরু করুন "

— ওয়েবডাইভার

Answer 8

আমার উপাদানটি myClassObjectটাইপের একটি অবজেক্ট ব্যবহার করেছে MyClass, যা নিজেই ব্যবহার করছিল MyEnum। এটি উপরে বর্ণিত একই সমস্যার দিকে পরিচালিত করে। এটি করে সমাধান করেছেন:

export enum MyEnum {
    Option1,
    Option2,
    Option3
}
export class MyClass {
    myEnum: typeof MyEnum;
    myEnumField: MyEnum;
    someOtherField: string;
}

এবং তারপরে টেমপ্লেটে এটি ব্যবহার করে

<div [ngSwitch]="myClassObject.myEnumField">
  <div *ngSwitchCase="myClassObject.myEnum.Option1">
    Do something for Option1
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option2">
    Do something for Option2
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option3">
    Do something for Opiton3
  </div>
</div>

Answer 9

যদি 'টাইপযোগ্য রেফারেন্স' পদ্ধতির ব্যবহার করে থাকেন (@ কার্ল জি থেকে) এবং আপনি একাধিক ধরণের টেবিল ব্যবহার করছেন তবে আপনি এই উপায়টি বিবেচনা করতে পারেন:

export default class AppComponent {

  // Store a reference to the enums (must be public for --AOT to work)
  public TT = { 
       CellType: CellType, 
       CatType: CatType, 
       DogType: DogType 
  };

  ...

  dog = DogType.GoldenRetriever; 

তারপরে আপনার এইচটিএমএল ফাইলটিতে অ্যাক্সেস করুন

{{ TT.DogType[dog] }}   => "GoldenRetriever"

আমি এই পদ্ধতির পক্ষে, কারণ এটি স্পষ্ট করে তোলে যে আপনি কোনও টাইপযোগ্য হিসাবে উল্লেখ করছেন এবং আপনার উপাদান ফাইলের অপ্রয়োজনীয় দূষণকে এড়িয়ে চলেছেন।

আপনি TTকোথাও একটি বিশ্বব্যাপী রাখতে পারেন এবং এটি হিসাবে প্রয়োজন হিসাবে enums যোগ করতে পারেন (আপনি যদি এটি চান তবে আপনি @ ভিনসেন্টসেলস উত্তর দ্বারা দেখানো হিসাবে একটি পরিষেবাও করতে পারেন)। আপনার অনেকগুলি টাইপটেবল থাকলে এটি জটিল হয়ে উঠতে পারে।

একটি সংক্ষিপ্ত নাম পেতে আপনি সর্বদা তাদের ঘোষণাপত্রে এগুলির নাম পরিবর্তন করেন।