如何从JSON中读取数据并将其绑定到Angular 2+中的Select下拉列表

Question

这是我的JSON的样子：

{
    "Stations": {
        "44": {
            "NAME": "Station 1",
            "BRANCH_CD": "3",
            "BRANCH": "Bay Branch"
        },
        "137": {
            "NAME": "Station 2",            
            "BRANCH_CD": "5",
            "BRANCH": "Beach Branch"        
        }
    }
}

我想知道是否有可能从每个“站”中提取“名称”和“分支”值并将它们绑定到单独的选择输入[下拉列表]

我正在使用Angular4。这是我所拥有的：

 this.apiService.getStations().subscribe(data => {
      this.stationList = data.Stations;
     }, err => {
      this.errorFetchingStations = err;
      console.log("Error getting list of stations " + err);
    })

this.stationList在控制台中给了我这种格式的对象：

{44:{NAME: "Name of station", BRANCH: "Name of branch"}}
{137:{NAME: "Name of station", BRANCH: "Name of branch"}}

等等。

如果我尝试像这样将stationList绑定到我的选择，则会出现错误

错误错误：尝试与'[object Object]'进行比较时出错。 仅允许数组和可迭代

    <select class="form-control">
        <option *ngFor="let station of stationList" [value]="station.NAME">{{station.NAME}}</option>
      </select>

Answer 1

您具有对象的键值对，而不是ngFor需要一个数组，因此应使用以下代码

 this.apiService.getStations().subscribe(data => {
      this.stationList = Object.values(data.Stations); // returns an array
     }, err => {
      this.errorFetchingStations = err;
      console.log("Error getting list of stations " + err);
    })

Answer 2

您应该将stationList转换为数组，然后可以使用Object.values（data.Stations），如下所示。

this.apiService.getStations().subscribe(data => {
  var stations = data.Stations;
  this.stationList = Object.values(stations);
}, err => {
  this.errorFetchingStations = err;
  console.log("Error getting list of stations " + err);
})