'object'タイプの異なるサポートオブジェクト '[object Object]'が見つかりません。 NgForは配列などのIterablesへのバインドのみをサポートしています

Question

私は、そのデータに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.

Answer 1

エラーは、ほとんどがそれを離れています。オブジェクトではなく、配列でngForを実行しようとしています。オブジェクトを配列に変換する必要があります。試してみてくださいJSON.parse(yourObjectHere)