Angular 8使用HttpClient遇‘Cannot read property 'of' of undefined’错误求助

看起来你踩了一个很典型的类型定义与实际返回数据不匹配的坑，我来帮你一步步解决：

核心问题分析 #

你在代码里把API返回值声明为Search[]数组，但浏览器控制台显示后端实际返回的是单个Search对象，这就导致了后续*ngFor报错（因为ngFor只能遍历数组这类可迭代对象），以及[object object]的显示问题。

具体修改方案 #

1. 修正服务和组件的类型定义 #

首先要把类型匹配好，因为API返回的是单个对象：

修改数据服务（DataAccessService）的方法

// 把返回类型从Search[]改为Search
getAllLocosByID(locoID: string) {
  return this.http.get<Search>(`${environment.apiUrl.searchbylocoid}/${locoID}`);
}

修改组件代码

// 把变量类型从Search[]改为Search
logoSearchResults: Search;
constructor(private data: DataAccessService) { }

getLocmotives() {
  this.data.getAllLocosByID('A1').subscribe((res: Search) => {
    // 直接赋值单个对象，不需要展开运算符（除非你需要深拷贝）
    this.logoSearchResults = res;
    console.log(this.logoSearchResults);
  }, error => {
    console.log("error");
  })
}

2. HTML展示的正确方式 #

根据你的需求，有两种常见的展示场景：

场景1：查看整个对象的内容

直接用Angular的json管道格式化显示，避免[object object]：

<!-- 格式化显示整个对象 -->
<pre>{{ logoSearchResults | json }}</pre>

场景2：遍历对象中的results数组（这应该是你真正需要的）

因为你的Search类里包含results: String[]，可以直接遍历这个子数组，记得加?.安全导航符避免初始未赋值时的报错：

<!-- 遍历results数组 -->
<div *ngFor="let result of logoSearchResults?.results">
  {{ result }}
</div>

3. 如果你确实需要把单个对象转成数组处理 #

如果因为业务逻辑需要，必须把单个对象当成数组来遍历（比如统一列表渲染逻辑），不要在HTML里用Array.of（模板上下文无法访问全局Array对象，所以会报错），而是在组件代码里转换：

// 改回数组类型
logoSearchResults: Search[];

getLocmotives() {
  this.data.getAllLocosByID('A1').subscribe((res: Search) => {
    // 在组件里把单个对象包装成数组
    this.logoSearchResults = [res];
    console.log(this.logoSearchResults);
  }, error => {
    console.log("error");
  })
}

然后HTML就可以正常用*ngFor遍历了：

<div *ngFor="let item of logoSearchResults">
  <p>搜索输入：{{ item.input }}</p>
  <p>找到数量：{{ item.numFound }}</p>
  <div>结果列表：</div>
  <div *ngFor="let result of item.results">
    {{ result }}
  </div>
</div>

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