在角材料表上绑定枚举值答案

【问题标题】：Bind enum value on angular material table在角材料表上绑定枚举值
【发布时间】：2020-05-28 00:49:11
【问题描述】：

有什么方法可以将枚举值绑定到我的角度材料表？

例如：我有一个枚举。

export enum EnumName {
  val1 = 1,
  val2 = 2,
  val3 = 3
}

然后在我要显示的角度材料表上。

Id   EnumNameColumn
1    val2
2    val3
3    val1

不是这样的。

Id   EnumNameColumn
1    2
2    3
3    1

【问题讨论】：

标签： angular angular-material mat-table

【解决方案1】：

这是一个从枚举中提取字符串的简单解决方案。结果以字符串数组的形式传递：

使用getKeyListOfEnum() 方法

public getKeyListOfEnum<T>(enm: T): Array<string> {
    let retVal = [];

    if (this.isEnum(enm)) {

        // extract the keys of the enum (Strings only!)
        retVal = Object.keys(enm).filter(
            k => typeof enm[k as any] === 'number'
        );
    }

    return retVal;
}


// check whether it is an ENUM
private isEnum(instance: Object): boolean {
    const keys = Object.keys(instance);
    const values = [];

    for (const key of keys) {
        let value = instance[key];

        if (typeof value === 'number') {
            value = value.toString();
        }

        values.push(value);
    }

    for (const key of keys) {
        if (values.indexOf(key) < 0) {
            return false;
        }
    }

    return true;
}

然后你可以像这样使用它：

export enum Fruit {
    APPLE,
    ORANGE,
    PEAR
}


keyArray: Array<string> = [];
keyArray = this.getKeyListOfEnum(Fruit);

【讨论】：

【解决方案2】：

你可以使用一些类似的

dataSource = Object.keys(EnumName)
    .filter((x:any)=>x==Number(x))
    .map((x:any)=>({key:x,value:EnumName[x]}));

【讨论】：