Angular 15遇NG0900错误：无法遍历对象，页面不渲染数据

问题本质 #

你碰到的NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed错误，核心原因是赋值给contactUsQueryData的不是纯数组，而是包含数组的对象。虽然控制台展开后能看到数组内容，但实际接口返回的结构大概率是类似{ data: [...查询数据], meta: {...} }的格式（比如Strapi这类后端框架的默认响应结构），你直接把整个响应对象赋值给了数组类型变量，导致*ngFor无法遍历对象。

两种解决方案 #

方案1：在组件订阅时提取数组 #

修改contactus.component.ts中的订阅逻辑，从响应对象里取出真正的数组数据：

ngOnInit(): void {
  this._contactusqueryServices.getcontactUsQuery().subscribe(response=>{
    // 从响应对象中提取数组字段（示例为data，根据实际接口结构调整）
    this.contactUsQueryData = response.data;
    console.warn(response.data);
  });
}

方案2：在服务层提前处理数组（更推荐） #

利用RxJS的map操作符，在服务中直接返回处理后的数组，让组件拿到的就是可遍历的数组：

先在服务中导入map操作符：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; // 新增导入
import { QueryContact } from '../models/contactus';

@Injectable({
  providedIn: 'root'
})
export class ContactusService {

  private contactusquerypath='contactusqueries';

  constructor(private http: HttpClient) {}

  getcontactUsQuery():Observable<QueryContact[]> {
    return this.http.get<{data: QueryContact[]}>('http://localhost:1337/api/contactusqueries')
      .pipe(
        map(response => response.data) // 提取数组后返回
      );
  }
}

这种方式下组件原有代码无需修改，订阅时拿到的直接是可用数组。

验证方法 #

可以在控制台打印完整响应对象确认结构：

console.log('完整响应结构:', response);

展开后就能明确数组嵌套的具体字段，调整提取路径即可适配你的接口。

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