Question

我有一个字典的城镇和办公室以及两个选择元素，用于选择城镇和办公室之后。从选项列表中选择城镇后，第二个选项元素只需要显示所选城镇的值。

我正在使用（ngModelChange）和方法getOffices（officeId），但它没有显示任何东西。

我该如何解决这个问题？

＆＃13;

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

＆＃13;

                <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>

＆＃13;

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>

离子选择动态选项

1 个答案: