Angular - 在无线电组中传递枚举

Question

工具

使用 Jhipster v5.0.1 和 Angular v6.0.0

目标

使用单选组以模板驱动的形式传递枚举。

试试

我尝试了 Angular 驱动的 Bootstrap 标准：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;

在 enum.ts 中：

export enum PeriodeEtatEnum {
    MATIN = 'Matin',
    APRES_MIDI = 'Après-midi'
}

问题：modelTest 设置为未定义。

第二次尝试

<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>