我需要在带有 ngFor angular 5 的同一个 select 框中给出州和地区的详细信息

Question

这是我的json值，

{
"location": [{
        "state": "state1",
        "cities": [{
                "city1": "city1"
            },
            {
                "city2": "city2"
            }
        ]
    },
    {
        "state": "state2",
        "cities": [{
                "city1": "city1"
            },
            {
                "city2": "city2"
            },
            {
                "city3": "city"
            }
        ]
    }
]

}

select 框中的示例输出：

state1 - 州名 - parent

city1 - 城市名称 - child

城市2

---

state2 - 州名 - parent

city1 - 城市名称 - child

城市2

城市 3

    <select>
      <option *ngFor="let locations of location">
        {{locations.state}}{{locations.cities.citiname}}
      </option>
   <select>

它不是多select。这就像在城市下按州分组。

提前致谢。

Answer 1

您可以对 select 元素使用 optgroup 属性。

<select>
  <optgroup *ngFor="let location of locations" [label]="location.state">
    <option *ngFor="let city of location.cities">{{Utils.keys(city)[0]}}</option>
  </optgroup>
</select>

打字稿

Utils = {
     keys : Object.keys
}

您不能直接使用 Object.keys，因为 Object 是 window/global 的一部分，而 angular 无法计算该表达式。