如何操作离子2中.ts文件的下拉值？

Question

我已经具有相关下拉菜单和一些输入fields.I表单创建想在2种情况

1. 工作最初如果会话为null，则应该有形式没有数据，所有的字段应该（我已创建）
2. 如果有会话，然后我从Web API拉取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; 
     }); 
} 

，角不能区分，并与相应的name属性连接sState在states阵列中的对象中。所以你需要创建对它的引用。这也意味着sState就像您在阵列中拥有的对象一样成为对象。

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

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

这里有一个DEMO（离子2）。我用观测值，而不是承诺，但其实并不重要;）

---

编辑：

如果情况是，你没有得到预定的值sState，它是undefined，就像评论中提到的那样，它会勾选所有选项。我无法用我用作演示的离子2（RC）版本来重现问题，但在离子3中可以复制它。什么似乎解决这一优良，是初始化sState作为组件中的空对象：

sState = {}; 

Answer 2

您正在使用承诺这是异步的。您可以在您的案例中链接承诺，以确保在设置了this.documentDetails时设置了this.sState。

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 

    }