Ошибка: ошибка Не удается найти другой вспомогательный объект «[object Object]» типа «object». NgFor поддерживает только привязку к Iterables, таким как массивы.

Я пытаюсь связать некоторые данные JSON из моего API с HTML и перебрать их, используя *ngFor в angular 4. К сожалению, я получаю сообщение об ошибке в заголовке этого вопроса.

Рассматриваемый код:

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);
  }
}

Компонент.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 из API

{
  "UserName": "hello",
  "Country": [
    "South Africa",
    "Russia",
    "India",
    "America",
  ]
}