[解決済み] Angular2でのenumに基づく選択
2023-04-02 01:59:36
質問
私はこの列挙型(私は タイプスクリプト ) :
export enum CountryCodeEnum {
France = 1,
Belgium = 2
}
を作りたいのですが セレクト を構築したい。 フォーム で、それぞれの オプション に、value として列挙された整数値、label として列挙されたテキストを、このように指定します。
<select>
<option value="1">France</option>
<option value="2">Belgium</option>
</select>
どうすればいいのでしょうか?
どのように解決するのですか?
更新2 配列を作成することで簡略化
@Pipe({name: 'enumToArray'})
export class EnumToArrayPipe implements PipeTransform {
transform(value) : Object {
return Object.keys(value).filter(e => !isNaN(+e)).map(o => { return {index: +o, name: value[o]}});
}
}
@Component({
...
imports: [EnumsToArrayPipe],
template: `<div *ngFor="let item of roles | enumToArray">{{item.index}}: {{item.name}}</div>`
})
class MyComponent {
roles = Role;
}
更新
の代わりに
pipes: [KeysPipe]
使う
@NgModule({
declarations: [KeysPipe],
exports: [KeysPipe],
}
export class SharedModule{}
@NgModule({
...
imports: [SharedModule],
})
オリジナル
を使うことで
keys
のパイプを
https://stackoverflow.com/a/35536052/217408
列挙型で正しく動作させるために、パイプを少し修正する必要がありました。 (参照 enum エントリの名前を取得するには? )
@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;
}
関連
-
[解決済み] BehaviorSubjectとObservableの違い?
-
[解決済み] NGIf else "の使い方を教えてください。
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] クラス定数を実装するには?
-
[解決済み] JSONオブジェクトをTypeScriptのクラスにキャストする方法を教えてください。
-
[解決済み] TypeScriptで文字列をenumに変換するには?
-
[解決済み] Angularでselect要素をオブジェクトにバインドする
-
[解決済み] TypeScriptのファイルをコマンドラインから実行するには?
-
[解決済み] Angular2 ngSwitchステートメントでtypescriptのenum値を使用する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] enumの項目名を取得する方法は?
-
[解決済み] Angular2 ngSwitchステートメントでtypescriptのenum値を使用する方法
-
[解決済み] tsc が `TS2307: Cannot find module` for a local file をスローします。
-
[解決済み] TypeScript "this" scoping issue when called in jquery callback.
-
[解決済み] ngFor を使用して、Typescript Enum を文字列の配列として反復処理するにはどうすればよいですか?
-
[解決済み] typescriptのインターフェイスを別ファイルで宣言しインポートする方法
-
[解決済み] typescriptで非推奨のマークを付けることは可能ですか?
-
[解決済み] ngForを使ったオブジェクトキーの反復処理方法
-
[解決済み] vs-codeで複数のtsconfigファイルを使用するには?