javascript - 如何将 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 );
    }

Angular :

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

ERROR TypeError: this.reportsUsage.values is not a function

3

object

所以数据类型从字典变为对象，我尝试用下面的方法转换它但仍然不起作用:

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

TypeError: object is not iterable (cannot read property 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 };

这还不是 JavaScript Map ，而是一个普通的 JSON 对象。所以正确使用的类型可能是 Record<number, number>我在哪里使用 Record utility type说“一个带有数字键和数值的对象”。

所以当你调用你的http.get你应该指定 Record<number, number>而不是 Map<number, number> :

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

---

如果你想把它转换成 Map ，您需要调用the Map constructor具有键值 tuples 的适当可迭代参数(例如数组) .而且由于 JSON 对象总是有 string key 而不是实际的 number s，如果你想要得到的 map 是Map<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 对象转换为此类条目元组的数组，我们是 mapping这些条目，以便键是数字。

让我们确保它有效:

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

看起来不错。 Playground link to code