在選擇的 Dropwdown angular 中顯示嵌套的 json

Question

我是 angular 的新手，正在努力在選擇下拉列表中顯示嵌套的 json 對象。 這是我的 json 對象。

[
  { 
    "cuisine":{ 
      "cuisine_id":1035,
      "cuisine_name":"Afghan"
    }
  },
  { 
    "cuisine":{ 
      "cuisine_id":1,
      "cuisine_name":"American"
    }
  }
]

在我的組件 HTML 中，我像這樣顯示

<select class="form-control dropdown" name="processTemplate" id="processTemplate">
  <option *ngFor="let cuisineList of cusine1 | keyvalue">
     {{ cuisineList.value.cuisine_name | json }}
   </option>
 </select>  

我想在選擇下拉菜單中只顯示菜名。 不知道我哪里出錯了。 任何幫助深表感謝

Answer 1

用：

{{ cuisineList.value.cuisine.cuisine_name }}

因為你需要給每個菜對象的訪問cuisine_name。

Answer 2

像這樣嘗試：

<select class="form-control dropdown" name="processTemplate" id="processTemplate">
  <option *ngFor="let cuisineList of cusine1 | keyvalue">
     {{ cuisineList.value.cuisine.cuisine_name }}
  </option>
</select>

工作演示

Answer 3

在變量中獲取 json 數組。 讓我們的變量是菜系。 現在按照片段。

<select class="form-control dropdown" name="processTemplate" id="processTemplate">
  <option *ngFor="let cuisineList of cuisines">
     {{ cuisineList.cuisine.cuisine_name}}
   </option>
 </select>