在 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

我的代碼迭代枚舉。 我必須為元素設置值，然后使用鍵和對象訪問它們。 理想情況下，您應該能夠執行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);
}

Answer 2

你有兩個錯誤：

• 枚舉不是可迭代的對象。 您需要將其轉換為數組（這取決於您使用字符串還是數字枚舉）。
• 您在組件模板中使用局部變量。 在模板中只能訪問類字段。

關鍵問題 - 你真的需要枚舉嗎？ 似乎非常適合數組：

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

實際上，枚舉很容易被誤解（尤其是數字枚舉和字符串枚舉之間的區別），如果我不使用它們，我通常更喜歡用普通對象或數組替換它們。