如何操作離子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 

    }