来自数组的打字稿枚举答案

【问题标题】：typescript enum from array来自数组的打字稿枚举
【发布时间】：2018-07-05 18:50:21
【问题描述】：

目前，我正在从后端获取一组 UserRole 对象。每个 UserRole 都有一个 Id (int) 和一个 Role (string)。

UserRoles[ ] 看起来像...

[
   //{id, role}
     {1, Viewer},
     {2, Owner},
     {3, Admin}
]

_models\userRole.ts

export interface UserRole {
    id: number,
    role: string
}

home.component.ts

export class HomeComponent implements OnInit {
    ...
    userRoles: UserRole[]

    constructor(...) {
        http.get<UserRole[]>(baseurl + "api/UserRoles/GetUserRoles").subscribe(result => { 
            this.userRoles = result; 
            }, error => console.error(error));
    }

    ...
}

问题：

我想把它变成一个枚举，用于限制呈现给用户的内容。例如，

<div *ngIf="user.userRoleId >= userRoles.Owner ">

我是否应该从后端（这是一个 ASP.NET Core 控制器）发送对象数组以外的其他内容？

有没有办法通过 api 调用立即生成枚举？

或者有没有办法将对象数组转换为枚举？

【问题讨论】：

可以使用响应创建对象，声明userRoles:any={};并在订阅中：result=>{result.forEach(p=>this.userRoles[result.role]=result.id)}。它不是枚举——编写代码时没有任何帮助——但你可以使用 this.userRoles.Owner

标签： angular typescript enums

【解决方案1】：

感谢 Eliseo 的建议，这就是我最终做的事情：

我将 UserRoles 作为数组检索，然后对该数组执行 foreach 循环，并将角色和 id 添加到对象。

home.component.ts

//imports

export class HomeComponent implements OnInit {
    ...
    user: User;
    userRoles: any = {};

    constructor(private userRoleService: UserRoleService, private alertify: AlertifyService) {}

    ngOnInit() {
        this.loadUserRoles();
    }

    loadUserRoles() {
        this.userRoleService.getUserRoles().subscribe((res: UserRole[]) => {
            res.forEach(p => this.userRoles[p.role] = p.id);
        });
    }

userRole.service.ts

//imports

@Injectable()
export class UserRoleService {
    baseUrl = environment.apiUrl;

    constructor(private authHttp: HttpClient) {}

    getUserRoles(): Observable<UserRole[]> {
        return this.authHttp
            .get<UserRole[]>(this.baseUrl + "UserRoles");
    }
}

home.component.html 实施

<div *ngIf="user.userRoleId >= userRoles.Owner ">
    ...
</div>

【讨论】：