Angular自动补全功能报错：NgFor仅支持绑定可迭代对象

嘿，我一眼就看出问题所在了——你遇到的这个报错核心原因是：*ngFor只能遍历数组这类可迭代对象，但你的Web API返回的是单个JSON对象（{"ClientId":15,"ClientName":"Abhinav Singh"}），不是数组格式，Angular自然没法用ngFor去循环它。

下面给你两种可行的解决方案，你可以根据实际情况选择：

方案1：修改Web API返回数组（推荐） #

如果有权限调整API的话，直接让它返回包含单个对象的数组，比如：

[{"ClientId":15,"ClientName":"Abhinav Singh"}]

这样你的现有前端代码不需要任何改动，ngFor就能正常遍历这个数组了。这也是搜索类接口的规范做法——不管结果数量多少，都返回集合类型。

方案2：前端Service层转换数据 #

如果没法修改API，那就在你的ClientSearchService里把返回的单个对象包装成数组。修改search方法里的map逻辑：

search(term: string): Observable<any[]> {
  return this.http.get(this.endPoint + '/' + term)
    .map((r: Response) => {
      const data = r.json();
      // 判断返回的是数组还是单个对象，把单个对象转成数组
      const resultData = Array.isArray(data) ? data : [data];
      // 如果结果为空，返回默认提示项
      return resultData.length !== 0 ? resultData : [{ "ClientId": 0, "ClientName": "No Record Found" }];
    });
}

为什么这样改？ #

• Array.isArray(data)会检查API返回的数据是不是数组：如果是数组就直接用，如果是单个对象就用[data]把它包装成只有一个元素的数组。
• 这样处理后，不管API返回单个对象还是多个对象的数组，最终传递给ngFor的都是数组，就不会再报那个绑定错误了。

改完之后，你HTML里的*ngFor="let client of clients | async"就能正常渲染出对应的列表项，点击事件也能正常获取到client对象。

内容的提问来源于stack exchange，提问作者Amol Naik