如何在Angular中以整数而不是字符串的形式发送枚举变量

Question

我使用的是Angular 11，必须将一些数据发布到后端服务。以下是我需要发布的数据：

interface User {
id: Guid; // Guid is just a type alias to string, with some validation checks
email: string;
role: Role
}
enum Role {
User = 0,
Administrator = 1
}

现在，当我尝试使用Angular的默认HttpClient发布到后端时，问题就来了。这是代码：

createOrUpdateUser(user: User): Observable<User> {
return this.http.post<User>(`${this.baseUrl}/${this.userUrl}/${this.userCreateOrUpdate}`, user);
}

这很好，但发送的JSON是"；错误"；。它发送这个：

{
"id": "2abe50d6-4c81-4ace-ad95-c8182d4384a3",
"email": "[e-mail]",
"role": "0"
}

作为后端期望这个的位置

{
"id": "2abe50d6-4c81-4ace-ad95-c8182d4384a3",
"email": "[e-mail]",
"role": 0
}

不同之处在于后端需要"role": 0，而Angular发送"role": "0"。如何让Angular发送"role": 0？

Answer 1

这可能不是一个好主意。但它会帮助你的。

createOrUpdateUser(user: User): Observable<User> {
user.role = Number(user.role);
return this.http.post<User>(`${this.baseUrl}/${this.userUrl}/${this.userCreateOrUpdate}`, user);
}

Answer 2

在发送api user.role＝+user.role之前，您可以使用+将其作为数字。在其他地方，您将在用户对象中分配角色值，使其成为字符串。这不是枚举问题。

Answer 3

TypeScript被编译为普通的旧javascript代码，其中类型强制或多或少不存在。这意味着，在理论上，您可能正在为User模型分配一个字符串。

可能有多种原因，即您通过这种方式从后端接收它，将它分配给一个变量，然后在不修改值的情况下重新发送。或者，例如，User来自一个FormGroup，它将值作为字符串传递。你甚至可以让TypeScript代码省略类型检查：

let user: User = {
id: '2abe50d6-4c81-4ace-ad95-c8182d4384a3',
email: '[e-mail]',
role: Role.Administrator
}
user['role'] = "2" // Not a valid enumeration

因此，与其采用一些奇怪的解决方法，比如在映射中使用+user.role，不如首先查找值的分配位置/方式。

Answer 4

由于还不清楚它是从angular发送的还是从服务器接收的字符串，我们可以调试一下，找到合适的地方进行调查(angular前端或后端(

您可以通过记录console.log(typeof user.role)进行调查，看看它返回了什么。还可以看看使用Chrome Devtools从前端发送到后端的内容->网络->点击请求->并向下滚动第一个选项卡以查看发送了哪些数据。

可能发生的情况是，前端发送角色的正确数据类型(整数(，后端将其解释为字符串。

在这种情况下，您可以在后端使用parseInt(user.role)作为后备，或者研究如何在后端主体请求中获得整数类型而不是字符串。