web-dev-qa-db-ja.com

Angular2の列挙に基づいて選択

私はこの列挙型を持っています（私はTypeScriptを使用しています）：

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

私はselectをformに構築し、各optionに値として列挙整数値を、そしてラベルとして列挙テキストを構築したいと思います。このような ：

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

これどうやってするの ？

typescriptangularangular2-forms
58
AdrienTorris

update

pipes: [KeysPipe]の代わりに

つかいます

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

@NgModule({
  ...
  imports: [SharedModule],
})

オリジナル

https://stackoverflow.com/a/35536052/217408 からのkeysパイプの使用

列挙型で正しく動作するようにパイプを少し変更する必要がありました（ TypeScript列挙型エントリの名前を取得する方法 も参照）

@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;
}

Plunker

オブジェクトで* ngForを使用する方法 も参照してください。

45
Günter Zöchbauer

新しいパイプを作成したくない場合のもう1つのソリューション。ヘルパープロパティにキーを抽出して使用することもできます。

@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)
  }
}

デモ：http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

47
dfsq

Angular2 v2.0.0の非常に簡単な方法を次に示します。完全を期すために、 reactive forms を介してcountry 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
  }
}
19
rynop

別の同様のソリューション、「0」を省略しない（「未設定」のような）。 filter（Number）IMHOを使用するのは良い方法ではありません。

@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)));
  }
}

// ** NOTE: This enum contains 0 index **
export enum CountryCodeEnum {
   Unset = 0,
   US = 1,
   EU = 2
}
7
Tomino

enumを標準配列に変換してselectを作成するために、Angularアプリで共有される単純なユーティリティ関数を使用することを好みました。

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

コンポーネントの変数に以下を入力します。

public countries = enumSelector(CountryCodeEnum);

次に、古い配列ベースのものとしてマテリアルセレクトを入力します。

<md-select placeholder="Country" [(ngModel)]="country" name="country">
  <md-option *ngFor="let c of countries" [value]="c.value">
    {{ c.title }}
  </md-option>
</md-select>

このスレッドをありがとう！

7
Mateo Tibaquirá

Angular 6.1以降では、以下のように組み込みのKeyValuePipeを使用できます（angular.ioドキュメントから貼り付けられます）。

もちろん、列挙型には人間が読みやすい文字列が含まれていると仮定しています:)

@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']]);
}
3
Samuel R

文字列列挙型を使用すると、これを試すことができます。

私の文字列列挙には次の定義があります：

    enum StatusEnum {
        Published = <any> 'published',
        Draft = <any> 'draft'
    }

次の方法でjsに変換されます。

   {
       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;
       }
   }

コンポーネントコンストラクターで初期化し、次のようにテンプレートにバインドします。

コンポーネント内：

    statusSelect;

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

テンプレート内：

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

UtilsServiceをapp.module.tsのプロバイダー配列に追加することを忘れないでください。これにより、異なるコンポーネントに簡単に挿入できます。

私はTypeScriptの初心者なので、間違っているか、より良い解決策がある場合は修正してください。

1
Christopher

これは、パイプや余分なコードなしで適用できる最良のオプションです。

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

  }
}
1
Nimish goel

この答えから派生した別の方法ですが、これは値を文字列に変換するのではなく、実際には数値としてマップしますが、これはバグです。 0ベースの列挙型でも動作します

@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));;
  }
}
1
johnny 5