循环通过响应对象角度

Question

我正在尝试遍历一个数组，该数组包含一些我想呈现给用户的值。我在用角度提取这些值时遇到了一些困难。我不确定我做错了什么。我收到了回复，所以我知道请求正在返回，但是我似乎无法访问或循环遍历数组的各个部分。

c#代码：

 [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
public class MapController : ApiController
{
    Map[] map = new Map[]
    {
        new Map { Map_Data_ID = 122, County = "West Yorkshire", Color = "#d45faa"},
        new Map { Map_Data_ID = 122, County = "West Yorkshire", Color = "#d45faa"},
    };

    public IEnumerable<Map> GetAllProducts()
    {
        return map;
    }
}

角度：

test: Array<{id: Number, value: string, color: string}> = [];

getMapData() {     
       this._interactiveMapService.getMapData()
          .subscribe(
              data => {
                  var arr = Object.keys(data).map(key => ({type: key, value: data[key]}));
                  for(var i; i < arr.length; i++) {
                    this.test.push({id: i.Map_Data_ID, value: i.County, color: i.Color});
                  }
              })
    }

这也是我想附加的响应数据

例子：

 this.dataSource = {
      chart: {
        caption: "Depot Locations",
        subcaption: "United Kingdom (Counties)",
        numbersuffix: "%",
        includevalueinlabels: "1",
        labelsepchar: ": ",
        entityFillHoverColor: "#FFF000",
        theme: "fint",
      },   
      // Source data as JSON --> id represents counties of england.
      data: [
        {
          id: "126",
          value: "Anglesey",       
          color: "#d45faa"
        },
        {
          id: "108",
          value: "Argyl & Bute",          
          color: "#d45faa"
        }
      ]
    }

来自服务器的示例响应：

[
    {
        "Map_Data_ID": 122,
        "County": "West Yorkshire",
        "Color": "#d45faa"
    },
    {
        "Map_Data_ID": 167,
        "County": "Wiltshire",
        "Color": "#d45faa"
    }
]

Answer 1

假设响应格式如下：

data =  [ { "Map_Data_ID": 122, "County": "West Yorkshire", "Color": "#d45faa" }, { "Map_Data_ID": 167, "County": "Wiltshire", "Color": "#d45faa" } ];

你可以这样做

.subscribe(data => {
  this.data.forEach(e => {
    this.test.push({
      id: e.Map_Data_ID,
      value: e.County,
      color: e.Color
    })
  })
});

---

由于我们处于打字稿的世界，我们可以定义一个类来保存这些数据并使我们的生活更轻松。

export class CountryDetails {
  constructor(
    private id: number,
    private value: string,
    private color: string
  ) {}
}

现在使用新创建的类：

.subscribe(data => {
  this.data.forEach(e => {
    this.test.push(new CountryDetails(e.Map_Data_ID, e.County, e.Color));
  })
});