如何根据下拉菜单的选择创建动态元素

Question

我有一个用例，一旦从下拉列表中选择了集群，我想展示与集群相关的属性。

例如： 下拉菜单的初始状态：

在选择cluster3时，必须将新字段添加到模式中以显示与集群相关的属性。

该路线获取有关群集的详细信息，包括动态属性。这些属性的数量可能会有所不同，具体取决于选择的集群：

clusters : this.store.query('cluster', {detailed: true})

/ clusters api响应显示：

 {
  "data": [
  {
    "id": 1, 
    "type": "clusters",
    "attributes": {
      "clustername": "cluster1",
      "properties": {
        "queue.name": "name"
       }
     }
    },
    {
    "id": 2, 
    "type": "clusters",
    "attributes": {
      "clustername": "cluster2",
      "properties": {
        "os.name": "os"
       }
     }
    }
  ]
}

我该如何实现？

我可以创建一个样式为“ display：none;”的块。 然后将其切换为“ display：block;”单击群集名称（在setSelection操作中）。

但是我应该如何预先填充值？

我的模板文件包含的集群内容如下：

<label class="form-label" for="cluster">Cluster</label>
<div class="dropdown form-control full" id="cluster" style="width: 100%; max-width: 600px;" {{action "setSelection"}}>
<div class="selected-value" tabindex="0">
     <span>Select</span><span class="fa fa-caret-down"></span>
</div>
<ul class="dropdown-options">
     {{#each cluster as |item|}}
          <li value="{{item.id}}">{{item.clustername}}</li>
     {{/each}}
 </ul>
</div>

对于新字段：

{{#each ?? as |item|}}
<div class="form-field" style=" display:none;">
 <label class="form-label" for="queuename">Queue name</label>
  <div class="dropdown form-control full" id="queuename" style="width: 100%; max-width: 600px;">
    <input id="QueueName" style="width: 100%; max-width: 600px; value={{item}} "/>
  </div>
</div>
{{/each}}

如何根据“群集”下拉列表中选择的内容在此处填充值？ 这是在操作方法setSelection中完成的吗？

如果属性是clusters对象中的字段，我应该迭代什么？