我有这个枚举(我正在使用TypeScript):
export enum CountryCodeEnum {
France = 1,
Belgium = 2
}
我想在我的表单中构建一个select,每个选项的枚举整数值为value,枚举文本为label,如下所示:
<select>
<option value="1">France</option>
<option value="2">Belgium</option>
</select>
我怎样才能做到这一点 ?
更新
而不是pipes: [KeysPipe]
使用
@NgModule({
declarations: [KeysPipe],
exports: [KeysPipe],
}
export class SharedModule{}
@NgModule({
...
imports: [SharedModule],
})
原版的
使用keys
的https://stackoverflow.com/a/35536052/217408管道
我不得不修改管道以使其与枚举一起正常工作(另请参阅How does one get the names of TypeScript enum entries?)
@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;
}
如果您不想创建新管道,还有一个解决方案。您还可以将密钥提取到helper属性中并使用它:
@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)
}
}
但是:ぁzxswい
对于Angular2 v2.0.0,这是一种非常简单的方法。为了完整起见,我已经包含了一个通过http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview设置country
选择的默认值的示例。
reactive forms
我更喜欢在我的Angular App上共享一个简单的实用程序函数,将@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
}
}
转换为标准数组来构建选择:
enum
使用以下内容填充Component中的变量:
export function enumSelector(definition) {
return Object.keys(definition)
.map(key => ({ value: definition[key], title: key }));
}
然后填充我的材料选择作为我的旧数组基于:
public countries = enumSelector(CountryCodeEnum);
谢谢你这个帖子!
另一个类似的解决方案,不会省略“0”(如“未设置”)。使用过滤器(数字)恕我直言不是一个好方法。
<md-select placeholder="Country" [(ngModel)]="country" name="country">
<md-option *ngFor="let c of countries" [value]="c.value">
{{ c.title }}
</md-option>
</md-select>
从Angular 6.1及更高版本开始,您可以使用如下所示的内置@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
}
(粘贴自angular.io docs)。
我假设enum包含人类友好的可读字符串当然:)
KeyValuePipe
使用字符串枚举,您可以尝试这个。
我的字符串枚举具有以下定义:
@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']]);
}
并通过以下方式转换为js:
enum StatusEnum {
Published = <any> 'published',
Draft = <any> 'draft'
}
我在我的项目中有一些这样的,所以在共享服务lib中创建了小帮助函数:
{
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);
}
不要忘记将UtilsService添加到app.module.ts中的提供者数组中,以便您可以轻松地将其注入不同的组件中。
我是打字稿的新手,所以如果我错了或者有更好的解决方案,请纠正我。
这个答案的另一个分离,但这实际上将值映射为数字,而不是将它们转换为字符串,这是一个错误。它也适用于基于0的枚举
<option *ngFor="let status of statusSelect" [value]="status.value">
{{status.key}}
</option>
这是您可以在没有任何管道或额外代码的情况下应用的最佳选项。
@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));;
}
}