У меня есть это перечисление (я использую TypeScript):
export enum CountryCodeEnum {
France = 1,
Belgium = 2
}
Я хотел бы создать выбор в моей форме, причем для каждой опции значение целочисленного значения перечисления как значение и текст перечисления как метка, например:
<select>
<option value="1">France</option>
<option value="2">Belgium</option>
</select>
Как я могу это сделать?
update2 упрощается путем создания массива
@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 | enumsToArray">{{item.index}}: {{item.name}}</div>'
})
class MyComponent {
roles = Role;
}
update
обновлениевместо pipes: [KeysPipe]
использовать
@NgModule({
declarations: [KeysPipe],
exports: [KeysPipe],
}
export class SharedModule{}
@NgModule({
...
imports: [SharedModule],
})
оригинальный
Использование pipes keys из fooobar.com/questions/51379/...
Мне пришлось немного изменить канал, чтобы он работал правильно с перечислениями (см. также Как получить имена записей 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;
}
Еще одно решение, если вы не хотите создавать новую pipeу. Вы также можете извлечь ключи в вспомогательное свойство и использовать его:
@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(k => !isNaN(Number(k)));
}
}
Demo: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview
Изменить:
если вам нужны параметры в виде чисел вместо строк:
[value] на [ngValue].map(Number) после .filter(...)Вот очень простой способ для Angular2 v2.0.0. Для полноты я включил пример установки значения по умолчанию для country с помощью реактивных форм.
@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
}
}
Я предпочел иметь простую функцию утилиты, совместно используемую в моем приложении Angular, чтобы преобразовать enum в стандартный массив для сборки select:
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>
Спасибо за эту тему!
Другое подобное решение, , которое не пропускает "0" (например, "Unset" ). Использование фильтра (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
}
Начиная с углового 6.1 и выше вы можете использовать встроенный KeyValuePipe как показано ниже (вставлен из угловых.io docs).
Я предполагаю, что перечисление содержит человеческие дружественные читаемые строки, конечно :)
@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']]);
}Другое отключение этого ответа, но это фактически отображает значения как числа, а не превращает их в строки, которые являются ошибкой. Он также работает с перечислениями на основе 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));;
}
}
С помощью перечислений строк вы можете попробовать это.
Моя строка перечисления имеет следующее определение:
enum StatusEnum {
Published = <any> 'published',
Draft = <any> 'draft'
}
и переводит на js следующим образом:
{
Published: "published",
published: "Published",
Draft: "draft",
draft: "Draft"
}
У меня есть несколько из них в моем проекте, поэтому создана небольшая вспомогательная функция в общей службе lib:
@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 в массив поставщика в вашем приложении .module.ts, чтобы вы могли легко вводить его в разные компоненты.
Я новичок typescript, поэтому, пожалуйста, поправьте меня, если я ошибаюсь или если есть лучшие решения.
Это лучший вариант, который вы можете применять без каких-либо каналов или дополнительного кода.
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];
}
}