離子選擇動態選項

Question

我有一個字典的城鎮和辦公室和兩個選擇元素選擇鎮和辦公室後。從選項列表中選擇城鎮後，第二個選項元素只需顯示所選城鎮的值。

我正在使用（ngModelChange）和方法getOffices（officeId），但它不顯示一個東西。

我該如何解決這個問題？

 

 
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

我已經找到了解決辦法。適合所有需要的人：

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>