Error:error Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays - angular4-httpclient

Question

I am trying to bind some JSON data from my API to HTML and iterate it over it using *ngFor in angular 4. Unfortunately, I'm getting the error in this question's title.
The code in question:
countryList.ts
export interface CountryList {
UserName : string,
Country : string[],
}
Service.ts
export class LoginServicesService {
constructor(private o:Http) { }
functionCountriesList(userName:string)
{
return this.o.get('http://localhost:55760/api/Login/GetCountries/'+userName).map((res:Response) =><CountryList[]>res.json());
}
}
Component.ts
export class LoginComponent implements OnInit {
constructor(private loginService: LoginServicesService) { }
ngOnInit() {
}
countries: CountryList[];
countryValue: number;
countryName: string;
GenerateCountries(userName: string) {
this.loginService.functionCountriesList(userName).subscribe((data) => this.countries = data);
console.log(this.countries);
}
}
Component.HTML
<table align="center">
<tr>
<td><label id="lblUserName">UserName:</label></td>
<td><input #userName type="Textbox" id="txtUserName" (keyup.enter)="GenerateCountries(userName.value)" (blur)="GenerateCountries(userName.value)" /></td>
</tr>
<tr>
<td>
<label id="lblPassword">Password:</label>
</td>
<td><input type="password" id="txtPassword"/></td>
</tr>
<tr>
<td>Domain:</td>
<td>
<select id= "district" style="width:100%" (change)="selectdrop($event)">
<option value="NIL">Select Domain</option>
<option *ngFor="let c of countries;let i=index">{{c}}</option>
</select>
</td>
</tr>
</table>
JSON from api is
{
"UserName": "hello",
"Country": [
"South Africa",
"Russia",
"India",
"America",
]
}

Answer 1

Your problem is that you're trying to directly iterate through the result of your API call, which a JSON object as you've pasted. You need to sub-select the "Country" field from your API response first and iterate through that.