【问题标题】:Error:error Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays错误:错误找不到“对象”类型的不同支持对象“[对象对象]”。 NgFor 仅支持绑定到 Iterables,例如 Arrays
【发布时间】:2018-04-20 10:23:32
【问题描述】:

我正在尝试将一些 JSON 数据从我的 API 绑定到 HTML,并在角度 4 中使用 *ngFor 对其进行迭代。不幸的是,我在这个问题的标题中遇到了错误。

有问题的代码:

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>

来自 api 的 JSON 是

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

【问题讨论】:

    标签: angular4-httpclient


    【解决方案1】:

    您的问题是您试图直接遍历 API 调用的结果,即您粘贴的 JSON 对象。您需要先从 API 响应中选择“国家/地区”字段并对其进行迭代。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-08-29
      • 1970-01-01
      • 2023-01-26
      • 2020-11-22
      • 2018-10-12
      • 2019-09-08
      • 2020-01-26
      • 2020-05-23
      相关资源
      最近更新 更多