Wählen Elternteil mit Kind Winkel 4 Optionen Array innerhalb Array

Question

Ich habe einen Web-Service-get Reihe von Ländern und innerhalb der einzelnen Länder Dienstleistungen, so will ich wählen Sie die Option make Benutzer in der Lage zu wählen Land oder Service

ich tun möchte, zu Sie möchten diese

<select [(ngModel)]="countries" (ngModelChange)="onChange($event)" > 
     <option *ngFor="let c of countries" [ngValue]="c">{{c.nom}} </option> 
      <option *ngFor="let service of services" [ngValue]="service"> &nbsp; {{service.nom}} </option> 
</select> 

aus dem Web-Service i wie diese [Länder] erhalten und in console.log, wenn ich in Ländern klicken i erhalten Liste der Länder und innen Liste der Dienste

Die Datenstruktur wie folgt aussehen

mit diesem Code erhalten i Länder und letzte Dienste :(, ich glaube, ich zwei müssen für da Array innerhalb Array, aber ich weiß nicht, wie zu tun es, so kann jemand mir helfen, dieses Problem zu beheben und dank

Answer 1

Um zu erreichen, was Sie wollen, sollten Sie optgroup verwenden.

Ex:

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

In Ihrem Fall wäre es wie folgt:

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

DEMO

Answer 2

Versuchen sie Ihr Land und Dienstleistungen in ein neues Array zur Karte:

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); 
    }) 
}); 

und dann in der Vorlage folgt aus:

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

Ich hoffe, das hilft Ihnen.