2017-06-27 8 views
1

私は辞書との町と事務所とを選択してください。オプションリストから町を選択した後、2番目のオプション要素は選択された町の値のみを表示する必要があります。イオン選択ダイナミックオプション

私は(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>

答えて

0

私は解決策を見つけました。それを必要とするすべての人に:

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> 
関連する問題