Question

我正在尝试迭代打字稿中的枚举来创建与它们对应的单选按钮。我知道如何使用数组做这个，但我很难用枚举来做。

    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

解决我的问题，任何人都需要做类似的事情。

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

返回枚举中左侧的值。

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

你有两个错误：

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

关键问题 - 你真的需要一个枚举吗？看起来非常适合阵列：

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

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

在ngFor中迭代枚举，angular5

2 个答案: