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

Question

这是我的json值，

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

}

选择框中的示例输出：

state1 - 州名称 - 父级

city1 - 城市名称 - 儿童

城2

state2 - 州名称 - 父级

city1 - 城市名称 - 儿童

城2

请分享帮助

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

它不是多选的。这就像在城市下按国家分组。

提前致谢。

Answer 1

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

<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无法评估该表达式。