Ionic Wählen Sie Dynamische Optionen

Question

Ich habe ein Wörterbuch von Städten und Büros und zwei Wählen Sie Elemente für die Wahl der Stadt und danach Büro. Nach Auswahl der Stadt aus der Optionsliste muss das zweite Optionselement nur Werte für die ausgewählte Stadt anzeigen.

Ich benutze (ngModelChange) und eine Methode getOffices (officeId), aber es zeigt nichts.

Wie kann ich dieses Problem lösen?

 

 
export class BillingAddressForm { 
 
econt: any; 
 
    offices:any; 
 
    office: any; 
 

 
    constructor(public functions: Functions, public values: Values){ 
 
    this.econt = 
 
      { 
 
        "towns" : {  
 
          "T1" : "Town1", 
 
          "T2" : "Town2" }, 
 

 
        "offices" : { 
 
           "T1": { "1070" : "Office1", "1071" : "Office2", "1072" :"Office3"}, 
 
           "T2": { "6800" : "Office4", "6801" : "Office5", "6802" : "Office6"} 
 
        } 
 
        
 
      }; 
 
     } 
 
     
 
    getOffices(officeId){ 
 
      this.econt.offices = this.form.office[officeId]; 
 
      this.service.updateOrderReview(this.form) 
 
       .then((results) => this.OrderReview = results); 
 
     } 
 

 

 

 
    }

   <ion-item> 
 
        <ion-label> Town </ion-label> 
 
        <ion-select [(ngModel)]="form.econt" (ngModelChange)="getOffices(form.econt)" name="econt"> 
 
        <div *ngFor="let field of econt.towns | keys"> 
 
         <ion-option value="{{field.key}}">{{field.value}} 
 
         </ion-option> 
 
        </div> 
 
        </ion-select> 
 
       </ion-item> 
 

 

 

 
       <ion-item> 
 
        <ion-label> Office </ion-label> 
 
        <ion-select [(ngModel)]="form.office" name="form.office"> 
 
        <div *ngFor="let field of offices | keys"> 
 
         <ion-option value="{{field.key}}">{{field.value}} 
 
         </ion-option> 
 
        </div> 
 
        </ion-select> 
 
      </ion-item>

Answer 1

Ich habe die Lösung gefunden. Für alle, die es brauchen:

getOffices(officeId) { 
    this.office = this.econt.offices[officeId]; 
    this.service.updateOrderReview(this.form) 
     .then((results) => this.OrderReview = results); 
} 


     <ion-item> 
      <ion-label> Town 
      </ion-label> 
      <ion-select [(ngModel)]="form.econt" (ngModelChange)="getOffices(form.econt)" name="form.econt"> 
      <div *ngFor="let field of econt.towns | keys"> 
       <ion-option value="{{field.key}}">{{field.value}} 
       </ion-option> 
      </div> 
      </ion-select> 
     </ion-item> 


     <ion-item *ngIf="office"> 
      <ion-label> Ofice 
      </ion-label> 
      <ion-select [(ngModel)]="form.office" name="form.office"> 
      <div *ngFor="let field of office | keys"> 
       <ion-option value="{{field.key}}">{{field.value}} 
       </ion-option> 
      </div> 
      </ion-select> 
     </ion-item>