Angular使用*ngFor遍历证书数据时报Only arrays and iterables are allowed错误

问题根因 #

报错ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed是因为*ngFor仅支持遍历数组/可迭代对象，你的代码存在两处核心错误：

1. 变量类型定义错误：listcertificates被定义为Certificate[]数组，但Certificate是外层响应对象（包含value字段），真正需要遍历的证书列表是Certificate内部的value字段，对应类型为ValueEntity[]
2. 赋值逻辑错误：API返回的是外层响应对象，你直接将整个对象赋值给了listcertificates，导致*ngFor拿到的是普通对象而非可迭代数组，触发报错

修复方案 #

1. 修正组件代码 #

调整变量类型和赋值逻辑，取响应对象的value字段作为遍历数据源：

export class CertificateTableComponent {
  constructor(private _integrationAccountService: integrationAccountService) {
  }

  // 变量类型修正为ValueEntity数组
  listcertificates: ValueEntity[] = [];

  ngOnInit() {
    this._integrationAccountService.getcertificates()
    .subscribe(data => {
      // 取返回值的value字段赋值，空值兜底为[]避免报错
      this.listcertificates = data.value ?? [];
    });
  }
}

2. 优化服务类型校验（可选，推荐） #

将服务返回类型定义为你提前声明的Certificate接口，方便TS做类型校验，避免后续类似赋值错误：

// 导入你定义的Certificate接口
import { Certificate } from './你的接口文件路径';

@Injectable()
export class integrationAccountService
{
  constructor(private httpclient: HttpClient, private api: ApiService) { }

  // 返回类型从Observable<any>改为Observable<Certificate>
  getcertificates(): Observable<Certificate> {
    const httpOptions : Object = {
      headers: new HttpHeaders({
        'Authorization': 'Bearer Token Here'
      }),
      responseType: 'json'
    };
    // 增加泛型指定返回值类型
    return this.httpclient.get<Certificate>('URL here', httpOptions);
  }
}

3. 模板优化（可选） #

为了避免偶发的空值报错，可以在模板绑定处增加可选链：

<tr *ngFor="let cert of listcertificates">
  <td>{{cert?.properties?.publicCertificate}}</td>
  <td>{{cert?.id}}</td>
  <td>{{cert?.name}}</td>
  <td>{{cert?.type}}</td>
</tr>

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