在 ngFor、Angular5 中迭代枚举

Question

我正在尝试在 TypeScript 中迭代枚举以创建与其对应的单选按钮。我知道如何使用数组来做到这一点，但我很难用枚举来做到这一点。

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>
  `
})

没有显示

Answer 1

你有两个错误：

枚举不是可迭代对象。您需要将其转换为数组（这取决于您使用的是字符串还是数字枚举）。
您在组件模板中使用了局部变量。在模板中只能访问 class 个字段。

关键问题 - 你真的需要枚举吗？似乎非常适合阵列：

@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']
}

实际上，枚举很容易被误解（尤其是数字枚举和字符串枚举之间的区别），如果我不使用它们，我通常更喜欢用普通对象或数组替换它们。

Answer 2

我的代码迭代枚举。我必须为元素设置值，然后使用键和对象访问它们。理想情况下，您应该能够执行 object.keys(labelModes) 而不是 keys(values)。但这是对我有用的唯一方法。

返回枚举左侧的值。

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);
}

在 ngFor、Angular5 中迭代枚举

Iterate Enum in ngFor, Angular5

enums

ngfor

angular