网站搜索

typescript - 如何将 mat-toggle-button-group 与枚举绑定?


我正在尝试显示一个 Angular Material mat-toggle-button-group,其中包含枚举中的三个选项:

enum Method {
    Lier,
    Sleep,
    Zelf
}

模板文件看起来大致如下:

<mat-button-toggle-group
    name="startMethod"
    [value]="Method[selectedMethod]"
    (change)="setStartMethod(group.value)"
>
    <mat-button-toggle
        *ngFor="let method of Method | enumToArray : false"
        [value]="Method[method]"
    >
        {{Method[method]}}
    </mat-button-toggle>
</mat-button-toggle-group>

请注意,我使用了枚举的字符串值作为[value],因为整数似乎不起作用(参见 https://github.com/angular/components/issues/11251)

设置组件的 selectedMethod 属性的函数如下所示:

setStartMethod(val: Method) {
    this.selectedMethod = val;
}

然而,这行不通,因为我得到的是一个字符串,而为了将属性设置为有效的 Method 成员,它需要是 Method 类型。

我本想问如何将字符串转换回枚举成员,但我觉得整个从枚举到字符串再到枚举的过程有点曲折,肯定有更好的方法来解决这个问题。或者上述提到的错误是否会阻碍以正确的方式解决这个问题?