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