Angular 在阵列内选择“父带子角度4选项阵列”

我有一个web服务获取一系列国家和每个国家/地区内的服务，因此我希望执行选择选项，使用户能够选择国家或服务

我想这样做

{{c.nom}}
{{service.nom}}

从web服务中，我得到如下[countries]，在console.log中，当我单击国家时，我得到国家列表和服务内部列表

数据结构如下所示

---

通过这段代码，我得到了国家/地区和最后的服务：（，我想我需要两个，因为阵列中有阵列，但我不知道如何操作，所以任何人都可以帮助我解决此问题，并感谢

尝试将您的国家/地区和服务映射到新阵列：

this.countryServices = [];

let data = [
  {country: 'Spain', services: ['spainSservice1', 'spainService2']},
  {country: 'Canada', services: ['canadaservice1', 'canadaservice2']},
];

data.map(country => {
  this.countryServices.push(country.country);
  country.services.map(service => {
    this.countryServices.push(service);
  })
});

然后在模板中：

<select>
  <option *ngFor="let cs of countryServices" [ngValue]="cs">{{cs}}</option>
</select>

{{cs}

---

我希望这对你有帮助。

要实现你想要的，你应该使用它

Ex:

<optgroup *ngFor="let obj of arr" [label]="obj.PROP">
  <option *ngFor="let nestedObj of obj.nestedArray">{{nestedObj.PROP}}</option>
</optgroup>

{{nestedObj.PROP}

就你而言，情况如下：

<optgroup *ngFor="let c of countries" [label]="c.nom">
  <option *ngFor="let service of c.services" [ngValue]="service">{{service.nom}}</option>
</optgroup>

{{service.nom}}

---

您应该使用

optgroup

来实现这一点，即：

{{c.nom}>……顺便说一句，你的数据结构如何？我之所以这么问是因为如果你的服务按国家分组会更有意义……但似乎不是。谢谢@developer033你能帮我想出主意，但你能回答这个问题吗？或者你想要数据结构吗？你能先包括你的数据结构吗？@developer033 okI刚刚发布了一个答案。。
<optgroup *ngFor="let c of countries" [label]="c.nom">
  <option *ngFor="let service of c.services" [ngValue]="service">{{service.nom}}</option>
</optgroup>