使用角度在html中显示枚举值答案

【问题标题】：Displaying enum value in html with angular使用角度在html中显示枚举值
【发布时间】：2020-11-11 15:58:57
【问题描述】：

我有一个枚举：

export enum NumberEnum { 
   One = 1,
   Two = 2,
   Three = 3
}

在我的组件中，我成功调用了一个服务，该服务正在传回一个结果，该结果具有以整数形式返回的枚举值的关联属性：

export class DetailsComponent implements OnInit, OnDestroy {

details$: any;
number: NumberEnum;


ngOnInit(): void {
         this.route.params.pipe(
         switchMap(params => this.service.getDetails(params['details-id']))
       ).subscribe(result => {
         this.details$ = result;
         this.number = this.details$.Number as NumberEnum;
       });
}

在我的 html 中，当我尝试显示 {{ number }} 时，它显示的是整数值，而不是我想要的字符串值。我尝试过用不同的方式投射……看起来像这样：

this.number = NumberEnum[this.details$.Number];

但我得到一个错误“类型'字符串'不可分配给类型'数字'”代码编译并显示为我想要的，我只知道在我的代码中有一个红色的错误行不是最佳实践。

似乎在网上找不到任何可以实现我想做的事情。

【问题讨论】：

标签： html angular typescript enums

【解决方案1】：

而不是设置this.number = NumberEnum[this.details$.Number]; 并更改您的this.number，只是在HTML 中以不同的方式显示。要么做{{ NumberEnum[number];}}，或者如果这不起作用，创建一个管道并像{{number|stringPipe}}一样添加它

【讨论】：

这确实有效，在 html 中而不是在组件中操作它有什么好处吗？
是的。您只是在影响您显示的内容，而不会影响组件中的值。这可以帮助防止以后出现不希望的副作用等
有道理，这纯粹是一个显示组件，尽管前端没有对数据进行任何操作。我会将此标记为答案，因为这确实有效

【解决方案2】：

鉴于 details$ 的类型是字符串，我将在 DetailsComponent 中添加一个函数，该函数将返回正确的 NumberEnum 值。

 export class DetailsComponent implements OnInit, OnDestroy {
    
    details: string;
    number: NumberEnum | undefined;
    
    
    ngOnInit() {
             this.route.params.pipe(
             switchMap(params => this.service.getDetails(params['details-id']))
           ).subscribe(result => {
             this.details = result;
             this.number = this.getDetailsNumber(this.details);
           });
    }
    getDetailsNumber(value: string): NumberEnum | undefined {
      return Number(value) in NumberEnum ? NumberEnum[Number(value)] : undefined;
    }
}

【讨论】：

有没有办法强制转换以便不需要方法？但是，这确实有效
强制转换是必需的，因为您的 Enum 类型与特定示例中的服务响应不同。您可以在服务响应中将类型修改为 Number，不再需要强制转换。

【解决方案3】：

好的，事实证明，它编译成功并带有红色错误行的原因是这实际上只是一个 tsLint 错误（其他错误事先以黄色显示，所以不确定为什么这个是红色的 - 一定是我的主题）。无论如何，我通过将数字声明为字符串而不是枚举来解决这个问题，所以当我将它转换为它时，它接受了它并将数值转换为枚举字符串。它显示正确。如下图：

export class DetailsComponent implements OnInit, OnDestroy {

details$: any;
number: string;

this.number = NumberEnum[this.details$.Number];

【讨论】：