Angular中*ngFor绑定非可迭代对象报错，求解决方法

问题原因 #

你的API返回的JSON是一个包含数组的对象，而非直接返回数组。当前代码把整个响应对象赋值给了channels数组，导致channels变成了非可遍历的Object类型，而*ngFor只能处理数组这类可迭代对象，因此报错。

解决方法 #

你需要从API响应中提取出真正的数组部分（即result字段），再赋值给channels。有两种常见实现方式：

方式1：在组件的订阅回调中处理 #

修改component.ts里的getChannel方法，直接提取响应的result属性：

getChannel() {
  this.channelService.getChannels().subscribe(response => {
    this.channels = response.result; // 提取result数组
  })
}

同时建议更新服务的返回类型，匹配API实际返回结构：

// service.ts
interface ApiResponse {
  result: Channel[];
}

getChannels(): Observable<ApiResponse> {
  const url = this.urlGet;
  return this.http.get<ApiResponse>(url);
}

方式2：在服务中提前处理响应 #

如果希望组件直接拿到数组，可在服务中通过map操作符转换响应：

// service.ts
import { map } from 'rxjs/operators';

getChannels(): Observable<Channel[]> {
  const url = this.urlGet;
  return this.http.get<any>(url).pipe(
    map(response => response.result) // 提取数组后返回
  );
}

这种情况下组件代码无需修改，订阅后直接赋值即可。

验证修改 #

修改完成后，channels会被正确赋值为API返回的数组，*ngFor就能正常遍历渲染数据了。

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