如何将 C# 字典传递到 typescript Map

Question

如何将 C# 字典正确传递到 typescript Map 中。

[HttpGet("reportsUsage")]
    public IActionResult GetReportsUsage()
    {
        //var reportsUsage = _statService.GetReportsUsage();

        IDictionary<int, int> test = new Dictionary<int, int>();

        test.Add(1, 20);
        test.Add(2, 30);
        test.Add(3, 40);
        test.Add(4, 50);
        test.Add(5, 70);
        test.Add(6, 60);
        test.Add(7, 90);
        test.Add(8, 30);

        return Ok(test);
        //return Ok(reportsUsage );
    }

以角度表示：

getReportsUsage() {
return this.http.get<Map<number, number>>(`${environment.apiUrl}/stats/reportsUsage`, {
  headers: new HttpHeaders({
    'Content-Type': 'text/plain',
    'Accept': 'application/json'
  }),
  withCredentials: true
});
}

reportsUsage = new Map<number, number>();

this.statsService.getReportsUsage().subscribe(data => {
    this.reportsUsage = data;
    
    //1
    console.log(this.reportsUsage);
    //2
    console.log(this.reportsUsage.values());
    //3
    console.log(typeof(this.reportsUsage));
};

结果：

1

{1: 20, 2: 30, 3: 40, 4: 50, 5: 70, 6: 60, 7: 90, 8: 30}

2

错误 TypeError：this.reportsUsage.values 不是函数

3

目的

因此，数据类型从字典更改为对象，我尝试使用以下命令将其转换，但仍然无法正常工作：

console.log(new Map(this.reportsUsage));

类型错误：对象不可迭代（无法读取属性 Symbol(Symbol.iterator)）

Answer 1

我不知道 C# 在这里是否非常相关，除了通过网络传输的是一个如下所示的 JSON 对象这一事实：

const data: Record<number, number> = 
  { 1: 20, 2: 30, 3: 40, 4: 50, 5: 70, 6: 60, 7: 90, 8: 30 };

这还不是一个JavaScriptMap，而是一个普通的 JSON 对象。因此，正确的类型可能是Record<number, number>我使用Record实用程序类型来表示“具有数字键和数字值的对象”。

因此，当您致电时，http.get您应该指定Record<number, number>而不是Map<number, number>：

this.http.get<Record<number, number>>(...)

如果要将其转换为 a Map，则需要使用键值元组的适当可迭代参数（例如数组）来调用构造函数Map。由于 JSON 对象始终具有键而不是实际的s，因此如果您希望结果映射而不是 ，则需要自己转换为数字：stringnumberMap<number, number>Map<string, number>

const map = new Map(Object.entries(data).map(([k, v]) => [+k, v]));
// const map: Map<number, number>

这用于Object.entries()将 JavaScript 对象转换为此类条目元组的数组，并且我们正在映射这些条目，以便键是数字。

让我们确保它有效：

console.log(map.get(3)?.toFixed(2)) // "40.00"

看起来不错。 Playground 代码链接