如何將 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

錯誤類型錯誤：this.reportsUsage.values 不是 function

3

object

因此數據類型從 Dictionary 更改為 object，我嘗試使用以下內容進行轉換，但仍然無法正常工作：

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

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

Answer 1

我不知道 C# 在這里非常相關，除了電線上出現的是 JSON object 這樣的事實：

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

這還不是JavaScript Map ，而是普通的 JSON ZA8CFDE6331BD54B66AC96F8911C。 所以要使用的正確類型可能是Record<number, number>我使用Record實用程序類型說“帶有數字鍵和數值的 object”。

因此，當您調用http.get時，您應該指定Record<number, number>而不是Map<number, number> ：

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

---

如果要將其轉換為Map ，則需要使用鍵值元組的適當可迭代參數（例如數組）調用Map構造函數。 並且由於 JSON 對象始終具有string鍵而不是實際number ，因此如果您希望生成的 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 object 轉換為此類條目元組的數組，我們將這些條目映射為鍵。

讓我們確保它有效：

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

看起來不錯。 Playground 代碼鏈接

Answer 2

1-如果你想從reportsUsage中創建一個map：

const map = new Map(Object.entries(this.reportsUsage));
console.log(map.get("1")); // prints 20

2-如果您想要一個僅包含值的數組：

const arrayOfValues = Object.values(this.reportsUsage)