Typescript Enum 组合键值问题

Question

我想在我的下拉列表中实现enum，但我在列表中同时获得了键和值。

我的枚举：

export enum VMRole {
    "Kubemaster" = 0, "Kubeworker" = 1, "Other" = 2
}

我正在尝试将enum 分配给我的财产：

export class VirtualMachine {   
    role: VMRole;
    ...
}

我的组件：

export class AddVmComponent implements OnInit {
  model: any = {};
  @ViewChild('addVMForm', { static: false }) formValues;  


  constructor(private alertify: AlertifyService, private vm: VmService, private route: 
       ActivatedRoute, private http: HttpClient) { 
    this.model.role = Object.keys(VMRole).filter(p => typeof p !== 'number')
  }
}

我的 HTML：

<select [ngModel]="model.role" class="form-control">     
   <option disabled>-Please choose role-</option>       
   <option *ngFor="let data of model.role | keyvalue"> 
            {{data.value}} 
   </option> 
</select>

截图：

Answer 1

当您尝试使用 p => typeof p !== 'number' 过滤掉 enum 中的数字时，就会出现问题。刚刚测试了它返回的值，就像下面的数组一样 - 你可以看到数组只包含 string 值：

所以解决方案看起来很棘手，但它可以为您完成工作：

Object.keys(VMRole).filter(p => !Number.isInteger(parseInt(p)))

甚至更简单的解决方案也适用于 TypeScript：

Object.keys(VMRole).filter(p => isNaN(p as any))

请在此处进一步阅读：

1. Number.isInteger()
2. parseInt()
3. isNaN()

希望对你有帮助！