在 ngFor、Angular5 中迭代枚举

Question

I am trying to iterate an enum in TypeScript to create radio buttons corresponding to them. I know how to do this using arrays but I am struggling to do it with enums.

enum labelModes{
'MultiClass',
'MultiLabel'
}
@Component({
    selector: 'app-label-type',
    template: `
    
    <div class="text-center p-2">
    Type of labeling:<br> 
       <div *ngFor = "let labelMode of labelModes">
            <input
                type = "radio"
                name = "labelType"
                value = "{{labelMode}}"
                (change) = "radioChangeHandler($event)"> {{labelMode}}
    </div>
  `
})

Nothing shows up

Answer 1

My code to iterate the enum. I had to set values for the elements and then access them using keys and objects. Ideally you should be able to do object.keys(labelModes) instead of keys(values) . But this is the only way it worked for me.

the values on the left in the enum are returned.

export enum labelModes {
  multiclass = "multiclass",
  multilabel = "multilabel"
}
@Component({
  selector: "app-label-type",
  template: `
  
  <div class="text-center p-2">
    Type of labeling:<br> 
       <div *ngFor = "let labelMode of values">
            <input
                type = "radio"
                name = "labelType"
                value = "{{labelMode}}"
                (change) = "radioChangeHandler($event)"> {{labelMode}}
      </div>
    `
    })
export class LabelType {
  ngOnInit() {}
  selectedLabelType: string = " ";
     
  values = Object.keys(labelModes);
}

Answer 2

You have two mistakes:

• Enum is not iterable object. You would need to convert it to array (it depends if you use string or number enums).
• You use local variable in component template. Only class fields are accessible in tempaltes.

Key question - do you really need an enum? Seems really good fit for array:

@Component({
    selector: 'app-label-type',
    template: `

    <div class="text-center p-2">
    Type of labeling:<br> 
       <div *ngFor = "let labelMode of labelModes">
            <input
                type = "radio"
                name = "labelType"
                value = "{{labelMode}}"
                (change) = "radioChangeHandler($event)"> {{labelMode}}
    </div>
  `
})
class Component {
     labelModes = ['MultiClass', 'MultiLabel']
}

Actually, enums are easy to misinterpret (especially difference between number enums and string enums), I usually prefer to replace them with plain objects or arrays if I don't use them.