找不到'对象'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables

时间:2017-06-27 13:12:50

标签: json angular ionic2 angular2-routing angular2-template

我正在构建一个使用webapi作为其数据的angular2应用程序。应用程序有3个下拉列表,这取决于下拉列表的先前值 我能够获取状态数据,但是当我选择任何状态时,它会抛出错误。
打字稿

public states; public counties; public cities; sState={}; sCounty={}; sCity={}; 

initializeState() {
  this.zipcode.getStates() .subscribe(data=>{ this.states=data; }) 

setCountyValues(sState) { this.selectedCounties=this.service.getCounties(sState) .subscribe(data=>{
this.selectedCounties=data; }) 
}

 setCityValues(sCounty) {
    this.selectedCities = this.service.getCities(sCount)
    .subscribe(data=>{
    this.selectedcities=data;})
  }

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.County)" [(ngModel)]="sCounty">
      <ion-option [value]="sCounty" *ngFor="let sCounty of selectedCounties" [selected]="sCounty">{{sCounty.County}}</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" [selected]="sCity">{{sCity.name}}</ion-option>
    </ion-select>
  </ion-item>

JSON数据(县)

[{"Id":210,"PageRec":"AZ005","PageEx":"AZ005","PageGfe":"AZ005","State":"Arizona","County":"Apache","CountyFips":"04001","Juris":"Apache","RecName":"Apache County","JurisType":"County","StateAbbrv":"AZ","GfeName":"Apache County","StateFips":"4","OfficeCode":" ","OfficeNote":" ","C1":" ","SubJuris":" ","PageRecName":"AZ005:Apache County"},{"Id":211,"PageRec":"AZ006","PageEx":"AZ006","PageGfe":"AZ006","State":"Arizona","County":"Cochise","CountyFips":"04003","Juris":"Cochise","RecName":"Cochise County","JurisType":"County","StateAbbrv":"AZ","GfeName":"Cochise County","StateFips":"4","OfficeCode":" ","OfficeNote":" ","C1":" ","SubJuris":" ","PageRecName":"AZ006:Cochise County"},{"Id":212,"PageRec":"AZ007","PageEx":"AZ007","PageGfe":"AZ007","State":"Arizona","County":"Coconino","CountyFips":"04005","Juris":"Coconino","RecName":"Coconino County","JurisType":"County","StateAbbrv":"AZ","GfeName":"Coconino County","StateFips":"4","OfficeCode":" ","OfficeNote":" ","C1":" ","SubJuris":" ","PageRecName":"AZ007:Coconino County"},{"Id":213,"PageRec":"AZ008","PageEx":"AZ008","PageGfe":"AZ008","State":"Arizona","County":"Gila","CountyFips":"04007","Juris":"Gila","RecName":"Gila County","JurisType":"County","StateAbbrv":"AZ","GfeName":"Gila County","StateFips":"4","OfficeCode":" ","OfficeNote":" ","C1":" ","SubJuris":" ","PageRecName":"AZ008:Gila County"}]

JSON数据(状态)

[{"StateID":2,"StateAbbr":"AL","StateName":"Alabama","IconFileName":null,"CreatedOn":null,"ModifiedOn":null,"NonState":0,"IsCanada":0},{"StateID":1,"StateAbbr":"AK","StateName":"Alaska","IconFileName":null,"CreatedOn":null,"ModifiedOn":null,"NonState":0,"IsCanada":0},{"StateID":4,"StateAbbr":"AZ","StateName":"Arizona","IconFileName":null,"CreatedOn":null,"ModifiedOn":null,"NonState":0,"IsCanada":0},{"StateID":3,"StateAbbr":"AR","StateName":"Arkansas","IconFileName":null,"CreatedOn":null,"ModifiedOn":null,"NonState":0,"IsCanada":0}]

ERROR

 Error:Cannot find a differ supporting object 'Response with status: 200 OK for URL: http://localhost:58682/home/GetCounties/?stateAbbr=AZ' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

1 个答案:

答案 0 :(得分:0)

错误主要是让它消失。您正在尝试对对象而不是数组执行ngFor。您需要将对象转换为数组。尝试使用JSON.parse(yourObjectHere)