工具
使用Jhipster v5.0.1和Angular v6.0.0
目标
使用无线电组以模板驱动的形式传递枚举。
尝试
我尝试了Angular引导程序的标准:Lien vers Radio-group ng-bootstrap
<span class="input-group-append" ngbRadioGroup name="periodePremierJour" [(ngModel)]="modelTest">
<label ngbButtonLabel class="radio-inline">
<input ngbButton type="radio" [value]="MATIN"> Matin
</label>
<label ngbButtonLabel class="radio-inline">
<input ngbButton type="radio" [value]="APRES_MIDI"> Après-midi
</label>
</span>
<hr>
<pre>{{periodeEtatEnum[modelTest]}}</pre>
和ts:
periodeEtatEnum: PeriodeEtatEnum;
modelTest : PeriodeEtatEnum;
和一个枚举:
export enum PeriodeEtatEnum {
MATIN = 'Matin',
APRES_MIDI = 'Après-midi'
}
问题:modelTest设置为undefined。
第二次尝试
<div *ngFor="let choice of keysPeriode">
<input type="radio"
[(ngModel)]="modelTest"
[checked]="'MATIN'==choice"
[ngModelOptions]="{standalone: true}"
[value]="choice" />
{{periodeEtatEnum[choice]}}<br>
periodeEtatEnum = PeriodeEtatEnum;
keysPeriode = Object.keys(this.periodeEtatEnum).filter( e => typeof( e ) == "string" );
modelTest : PeriodeEtatEnum;
ngOnInit(){
this.modelTest = PeriodeEtatEnum.MATIN;
}
问题:选择时,modelTest具有正确的值。但是,选中的选项不起作用!你能帮我吗?
谢谢
答案 0 :(得分:0)
我已经按照以下步骤完成了
创建您的枚举
export enum myEnum{
Customer = 1,
Store = 2
}
在您的组件中,获取枚举并从中生成密钥。
// declaration
enumKeys: any;
this.enumKeys = Object.keys(this.myEnum).filter(Number);
然后在您的模板中
<div class="form-check " *ngFor="let item of enumKeys">
<label class="form-check-label">
<input class="form-check-input" type="radio" (change)="onChanged($event)" [value]="item"> {{ myEnum[item] }}
</label>
</div>