Question

工具

使用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具有正确的值。但是，选中的选项不起作用！你能帮我吗？

谢谢

Answer 1

我已经按照以下步骤完成了

创建您的枚举

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>

Angular-在广播组中传递枚举

1 个答案: