枚举值的角管提取物，但对于任何枚举

发布于 2025-01-20 03:40:39 字数 621 浏览 4 评论 0原文

我有一个枚举，其中包含分配给元素的字符串。不幸的是，它不能使用整数作为索引。 RoleTypesEnum[0] =>不明确的。我制作了一个管道来解决这个问题。

export enum RoleTypesEnum {
    RoleA = 'Role is A',
    RoleB = 'Role is B',
}

//HTML ('opt' integer received from backend)
{{ RoleTypesEnum[opt] | enumIntToDescription}}

@Pipe({
    name: 'enumIntToDescription',
})
export class EnumIntToDescriptionPipe implements PipeTransform {
    transform(value: number): string {
        return Object.values(RoleTypesEnum )[value];
    }
}

但我想让它通用以适用于任何 Enum 类型，而不仅仅是 RoleTypesEnum。是否有适用于任何枚举的解决方案？也许使用泛型 EnumIntToDescriptionPipe？

原文

I have an enum with strings assigned to elements. Unfortunately, it does not work with integers as indexes. RoleTypesEnum[0] => undefined. I made a Pipe which solves this problem.

export enum RoleTypesEnum {
    RoleA = 'Role is A',
    RoleB = 'Role is B',
}

//HTML ('opt' integer received from backend)
{{ RoleTypesEnum[opt] | enumIntToDescription}}

@Pipe({
    name: 'enumIntToDescription',
})
export class EnumIntToDescriptionPipe implements PipeTransform {
    transform(value: number): string {
        return Object.values(RoleTypesEnum )[value];
    }
}

But I want to make it generic to work for any Enum type, not only RoleTypesEnum.
Can there be a solution to work for any enum? Maybe with generics EnumIntToDescriptionPipe?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多孤肩上扛 2025-01-27 03:40:39

如果你想让它通用，你可以将 enum 的值传递给管道。

{{ opt | enumIntToDescription: RoleTypesEnum }}

@Pipe({
    name: 'enumIntToDescription',
})
export class EnumIntToDescriptionPipe implements PipeTransform {
    // enum object on which you want this pipe to work
    transform(value: number, enum: any): any {
        return Object.values(enum)[value];
    }
}

在您的组件中，您可以将枚举值传递给管道，它将按预期工作。

If you want to make it generic, you can pass the value of enum to the pipe.

{{ opt | enumIntToDescription: RoleTypesEnum }}

@Pipe({
    name: 'enumIntToDescription',
})
export class EnumIntToDescriptionPipe implements PipeTransform {
    // enum object on which you want this pipe to work
    transform(value: number, enum: any): any {
        return Object.values(enum)[value];
    }
}

In your component, you can pass the enum value to the pipe and it will work as expected.

回复收藏 0 原文

节枝 2025-01-27 03:40:39

我已经尝试了上面的解决方案，但是对我有用的方法是在做更具体的情况：

我的EnumToDeScriptionPipe文件：

import { Pipe, PipeTransform } from "@angular/core";

export enum EnumTipoDeUsuario{
    ROLE_SUPPLIER = 'Third party Supplier',
    ROLE_USER = 'User'
} 

@Pipe({
    name: 'enumToDescription',
})
export class EnumToDescriptionPipe implements PipeTransform {
    transform(value: EnumTipoDeUsuario,): any{
        return EnumTipoDeUsuario[value];
    }
}

我的HTML：

{{element.profile | enumToDescription}}

正如我所说的那样，这是我更喜欢的更具体而不是通用的解决方案。

重要！对于使用 Angular 的人：
如果您仍然无法使用管道或正在收到错误请记住在 app.module 和 component_name.module 中声明

它 applicationPipeSmodule 用于声明的管道，并在 app.module 和 component_name.module 中声明为：

@NgModule({
  declarations: [
    CaptalizePipe, 
    EnumIntToDescriptionPipe
  ],
  imports: [CommonModule],
  exports: [
    CaptalizePipe,
    EnumIntToDescriptionPipe,
  ],
})
export class ApplicationPipesModuleModule {}

I've tried the solutions above but what worked for me was doing something more specific to the case:

My EnumToDescriptionPipe file:

import { Pipe, PipeTransform } from "@angular/core";

export enum EnumTipoDeUsuario{
    ROLE_SUPPLIER = 'Third party Supplier',
    ROLE_USER = 'User'
} 

@Pipe({
    name: 'enumToDescription',
})
export class EnumToDescriptionPipe implements PipeTransform {
    transform(value: EnumTipoDeUsuario,): any{
        return EnumTipoDeUsuario[value];
    }
}

My HTML:

{{element.profile | enumToDescription}}

As I said this is a more specific, not generic, solution which I preferred.

Important! For those using Angular:
If you still cant apply the pipe or is receiving an error remember to declare it in app.module and in component_name.module

I particularly created an ApplicationPipesModule for my pipes declaration and declared it in app.module and in the component_name.module:

@NgModule({
  declarations: [
    CaptalizePipe, 
    EnumIntToDescriptionPipe
  ],
  imports: [CommonModule],
  exports: [
    CaptalizePipe,
    EnumIntToDescriptionPipe,
  ],
})
export class ApplicationPipesModuleModule {}

回复收藏 0 原文

~没有更多了~