离子选择动态选项

Question

I have a dictionary of towns and offices and two Select elements for choosing town and after that office. After choosing the town from option list the second option element need to show only values for selected town.

I am using (ngModelChange) and a method getOffices(officeId) but it doesn't show a thing.

How can I solve this problem?

 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

I've found the solution. For everyone who needs it:

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>