如何在.ts文件中操作ionic2中的下拉值？

Question

我在表单上创建了依赖的下拉列表和一些输入字段，我希望它能在两个场景中工作。

1. 最初，如果会话是空的，那么表单中就不应该有数据，默认情况下所有字段都应该是空的。
2. 如果有会话，则从Web中提取JSON格式的数据，然后相应地填充字段。

     <ion-item>
        <ion-label>State</ion-label>
        <ion-select (ionChange)="setCountyValues(sState)" [(ngModel)]="sState" >
          <ion-option [value]="sState" *ngFor="let sState of states" [selected]="sState">{{sState.name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item *ngIf="selectedCounties">
        <ion-label>Counties</ion-label>
        <ion-select (ionChange)="setCityValues(sCounty)" [(ngModel)]="sCounty">
          <ion-option [value]="sCounty" *ngFor="let sCounty of selectedCounties">{{sCounty.name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item *ngIf="selectedCities">
        <ion-label>Cities</ion-label>
        <ion-select [(ngModel)]="sCity">
          <ion-option [value]="sCity" *ngFor="let sCity of selectedCities">{{sCity.name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item *ngIf="selectedCities">
        <button ion-button round color="primary" (click)="clear()">Clear</button>
        <button ion-button round color="primary" (click)="goToOfficeDetail()">Office Detail Page</button>
      </ion-item>

<ion-item>
    <button ion-button round color="primary" (click)="Autofill()">Autofill</button>   </ion-item>

[{
    "PageRec":"AL005",
    "State":"AL",
    "County":"Autauga County",
    "CityTown":null,
    "Zip":null,
    "ShowRecordingInfo":"true",
    "Deed":{
        "Checked":"True",
        "Pages":"1",
        "ConsiderationAmount":"150000"
        },
    "MortgageDeed":{
        "Checked":"False",
        "Pages":null,
        "NewDebtAmount":null
        },
    "MortgageRefi":{
        "Checked":"False",
        "Pages":null,
        "NewDebtAmount":null,
        "OriginalDebt":null,
        "UnpaidDebt":null
        },
    "Assignment":{
        "Checked":"False",
        "Pages":null,
        "Assignments":null
        },
    "ReleaseSatisfaction":{
        "Checked":"False",
        "Pages":null,
        "ReleasesSatisfactions":null
        },
    "Questions":{
        "Question":{
            "Number":"Q4",
            "Category":"Deed",
            "Type":"bool",
            "Question Text":"Are the deed and ``mortgage being recorded at the same time?",
            "Answer":"1"
            }
        }
}]

.TS

   GetDocumentDetailsData()
  {
    this.zipcode.getDocDetails().then(data=>this.documentDetails=data); 
  }

 Autofill()
  {

    this.GetDocumentDetailsData();

     this.sState = this.documentDetails.State;

  }

我的问题是，当我试图填充下拉，那么为什么显示问题说找不到财产的“国家”的未定。

Answer 1

你有几个问题。您正在接收的是一个数组，因此documentDetails包含一个数组，因此找不到documentDetails.State。所以您需要将它更改为documentDetails[0].State

然后我会像这样做请求：

AutoFill() {
   this.zipcode.getDocDetails()
      .then(data=> {
         this.documentDetails=data;
         this.sState = this.documentDetails[0].state;
      }); 
}

然后出现下一个问题，角无法区分sState并将其与states数组中对象中相应的name属性连接。所以你需要创建对它的引用。这也意味着sState成为一个对象，就像数组中的对象一样。

因此，这也可以在回调中完成：

.then(data=> {
   this.documentDetails=data;
   this.sState = this.states.find(state => state.name == this.documentDetails[0].State)
}); 

这是一个演示 (离子2)。我用的是观察而不是承诺，但这并不重要;)

编辑：

如果实际情况是，您没有获得sState的预定义值，并且它是undefined，就像注释中提到的那样，它会勾选所有选项。我不能重现的问题，离子2 (RC)版本，我正在使用的演示，但在离子3，它可以被复制。解决这一问题的方法似乎是将sState初始化为组件中的空对象：

sState = {};

Answer 2

您使用的是异步承诺。在您的情况下，您可以连锁承诺，以确保在设置this.sState时设置this.documentDetails。

  GetDocumentDetailsData()
  {
   return this.zipcode.getDocDetails().then(data=>{
        this.documentDetails=data;
        return data;//return data to receive in the next then
   }); //return the promise
  }

 Autofill()
  {

    this.GetDocumentDetailsData().then(docDetails=>{
         this.sState = docDetails.State;
    }).
      catch(err=>console.log(err));//all errors thrown in chain get caught 

  }