在Ionic2中的单击事件时，数据未加载

Question

我正在构建一个Ionic2应用程序，我为此我创建了一个WebAPI来从DB中获取数据。我正在调用API并获取数据，但是当我在控制台中看到时，我所看到的只是未定义。
ts

setCountyValues(sState) {
    // this.selectedCounties = this.counties.filter(county => county.state_id == sState.id)
    this.zipcode.getCounties(sState)
      .subscribe(data => {
        this.selectedCounties = data;
        
      })
  }
  
  
  DataFetch() {
    this.sState = this.documentDetails[0].DocumentTypeDetails.State;
    this.stateObj = this.states.find(state => state.StateAbbr == this.sState);
    console.log(this.stateObj); //working fine now
    this.sState = this.stateObj.StateName;
    this.setCountyValues(this.stateObj.StateAbbr);
    this.sCounty = this.documentDetails[0].DocumentTypeDetails.County
    console.log(this.selectedCounties); //giving undefined
    this.countyObj = this.selectedCounties.find(county => county.RecName == this.sCounty)
    this.sCounty = this.countyObj.RecName;
    console.log(this.sCounty);
  }
  
   Autofill() {
    this.zipcode.getDocDetails()
      .subscribe(data => {
        this.documentDetails = data;
        this.DataFetch();
      })
  }
  
  

html

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

json

"DocumentTypeDetails": {
            "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",
                    "QuestionText": "Are the deed and mortgage being recorded at the same time?",
                    "Answer": "1"
                }
            }
        }

当我试图填充countobj时，我得到的错误是"无法读取属性'find'dist'。当我调用setCountyValues方法时，现在选择的计算应该被填充，现在我知道这是异步数据，但我如何填充它？

Answer 1

这是因为您正在获取数据异步，这意味着您的代码： console.log(this.documentDetails) get 在实际获取数据之前先执行首先执行。如果您真的想将其打印到控制台上，请将其放入回调功能中：

Autofill() {
  this.zipcode.getDocDetails()
    .subscribe(data => {
      this.documentDetails = data;       
      console.log(this.documentDetails);
    });
  this.DataFill();
}