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




angular2-forms (6)

আমার এই এনাম রয়েছে (আমি টাইপস্ক্রিপ্ট ব্যবহার করছি):

export enum CountryCodeEnum {
    France = 1,
    Belgium = 2
}

আমি আমার ফর্মটিতে একটি নির্বাচন বানাতে চাই, প্রতিটি বিকল্পের জন্য এনাম পূর্ণসংখ্যা মান হিসাবে মান এবং এনাম পাঠ্যটিকে লেবেল হিসাবে এই:

<select>
     <option value="1">France</option>
     <option value="2">Belgium</option>
</select>

কিভাবে আমি এটি করতে পারব ?


আপনি যদি নতুন পাইপ তৈরি করতে না চান তবে আরও একটি সমাধান। আপনি সহায়িকার সম্পত্তিতে কীগুলিও বের করতে এবং এটি ব্যবহার করতে পারেন:

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <select id="country" formControlName="country">
        <option *ngFor="let key of keys" [value]="key">{{countries[key]}}</option>
      </select>
    </div>
  `,
  directives: []
})
export class App {
  keys: any[];
  countries = CountryCodeEnum;

  constructor(private fb: FormBuilder) {
    this.keys = Object.keys(this.countries).filter(Number);
    this.country = CountryCodeEnum.Belgium; //Default the value
  }
}

ডেমো: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

সম্পাদনা:

আপনার যদি স্ট্রিংয়ের পরিবর্তে সংখ্যা হিসাবে বিকল্পগুলি প্রয়োজন:

  • [value] [ngValue] সাথে প্রতিস্থাপন করুন
  • .filter(...) পরে .map(Number) .filter(...)

আর একটি অনুরূপ সমাধান, এটি "0" বাদ দেয় না ("আনসেট" এর মতো)। ফিল্টার (নম্বর) আইএমএইচও ব্যবহার করা ভাল পদ্ধতির নয়।

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

এখানে Angular2 v2.0.0 এর জন্য খুব সোজা উপায়। সম্পূর্ণতার জন্য, আমি প্রতিক্রিয়াশীল ফর্মগুলির মাধ্যমে নির্বাচনের country একটি ডিফল্ট মান নির্ধারণের একটি উদাহরণ অন্তর্ভুক্ত করেছি।

export function enumSelector(definition) {
  return Object.keys(definition)
    .map(key => ({ value: definition[key], title: key }));
}

কৌণিক 6.1 এবং তার উপরে আপনি নীচের মতো বিল্ট-ইন KeyValuePipe ব্যবহার করতে পারেন (কৌনিক.ও ডক্স থেকে আটকানো)।

আমি ধরে নিচ্ছি যে একটি এনামে অবশ্যই মানুষের বান্ধব পাঠযোগ্য স্ট্রিং রয়েছে :)

@Component({
  selector: 'my-app',
  providers: [],
  template: `
  <select>
<option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
  </select>`,
  directives: []
})

export class App {
  countries = CountryCodeEnum;

  constructor() {
    this.keys = Object.keys(this.countries)
                      .filter(f => !isNaN(Number(f)))
                      .map(k => parseInt(k));;
  }
}


স্ট্রিং এনামগুলির সাহায্যে আপনি এটি চেষ্টা করতে পারেন।

আমার স্ট্রিং এনামের নিম্নলিখিত সংজ্ঞা রয়েছে:

   {
       Published: "published", 
       published: "Published", 
       Draft: "draft", 
       draft: "Draft"
   }

এবং নিম্নলিখিত পদ্ধতিতে জেএস-এ অনুবাদ করুন:

   @Injectable()
   export class UtilsService {
       stringEnumToKeyValue(stringEnum) {
           const keyValue = [];
           const keys = Object.keys(stringEnum).filter((value, index) => {
               return !(index % 2);
           });

           for (const k of keys) {
               keyValue.push({key: k, value: stringEnum[k]});
           }

           return keyValue;
       }
   }

আমার প্রজেক্টে এর কয়েকটি রয়েছে যাতে একটি ভাগ করে নেওয়া সার্ভিস lib এ ছোট সহায়ক সহায়ক ফাংশন তৈরি করা হয়:

    statusSelect;

    constructor(private utils: UtilsService) {
        this.statusSelect = this.utils.stringEnumToKeyValue(StatusEnum);
    }

আপনার উপাদান নির্মাত্রে আরম্ভ করুন এবং এটি আপনার টেম্পলেটটিতে এটি আবদ্ধ করুন:

উপাদান মধ্যে:

    <option *ngFor="let status of statusSelect" [value]="status.value">
        {{status.key}}
    </option>

টেমপ্লেটে:

import { Component } from '@angular/core';

 enum AgentStatus {
    available =1 ,
    busy = 2,
    away = 3,
    offline = 0
}


@Component({
  selector: 'my-app',
  template: `
  <h1>Choose Value</h1>

  <select (change)="parseValue($event.target.value)">
    <option>--select--</option>
    <option *ngFor="let name of options"
        [value]="name">{{name}}</option>
  </select>

  <h1 [hidden]="myValue == null">
    You entered {{AgentStatus[myValue]}}

  </h1>`
})
export class AppComponent { 


  options : string[];
  myValue: AgentStatus;
  AgentStatus : typeof AgentStatus = AgentStatus;

  ngOnInit() {
    var x = AgentStatus;
    var options = Object.keys(AgentStatus);
    this.options = options.slice(options.length / 2);
  }

  parseValue(value : string) {
    this.myValue = AgentStatus[value];

  }
}

আপনার অ্যাপ্লিকেশন.মডিউল.টসগুলিতে সরবরাহকারীর অ্যারেতে ইউটিস সার্ভিস যুক্ত করতে ভুলবেন না যাতে আপনি সহজেই এটি বিভিন্ন উপাদানগুলিতে ইনজেক্ট করতে পারেন।

আমি টাইপস্ক্রিপ্ট নবাগত তাই আমি যদি ভুল হয়ে থাকি বা এর থেকে আরও ভাল সমাধান থাকে তবে আমাকে সংশোধন করুন।


আপডেট 2 একটি অ্যারে তৈরি করে সরল

@NgModule({
  declarations: [KeysPipe],
  exports: [KeysPipe],
}
export class SharedModule{}

হালনাগাদ

pipes: [KeysPipe] পরিবর্তে pipes: [KeysPipe]

ব্যবহার

@NgModule({
  ...
  imports: [SharedModule],
})
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (var enumMember in value) {
      if (!isNaN(parseInt(enumMember, 10))) {
        keys.push({key: enumMember, value: value[enumMember]});
        // Uncomment if you want log
        // console.log("enum member: ", value[enumMember]);
      } 
    }
    return keys;
  }
}

@Component({ ...
  pipes: [KeysPipe],
  template: `
  <select>
     <option *ngFor="let item of countries | keys" [value]="item.key">{{item.value}}</option>
  </select>
`
})
class MyComponent {
  countries = CountryCodeEnum;
}

মূল

https://.com/a/35536052/217408 থেকে keys পাইপ ব্যবহার করা

এটিগুলি এনামগুলির সাথে সঠিকভাবে কাজ করার জন্য আমাকে পাইপটি কিছুটা পরিবর্তন করতে হয়েছিল ( এনাম এন্ট্রিগুলির নাম কীভাবে পাবেন? দেখুন )

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <select>
        <option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
      </select>
    </div>
  `,
  directives: []
})
export class App {

  countries = CountryCodeEnum

  constructor() {
    this.keys = Object.keys(this.countries).filter(Number)
  }
}

Plunker

আরও দেখুন কীভাবে * এনজিফোর্ড ব্যবহার করে অবজেক্ট কীগুলি পুনরাবৃত্তি করা যায়?





angular2-forms