使用 angular 8 和 httpclient 获取 "Cannot read property 'of' of undefined"

Question

我已经使用以下服务为我的项目配置了新的 httpclient。 AppModule.ts 设置正确

getAllLocosByID(locoID: string) {
    return this.http.get<Search[]>(`${environment.apiUrl.searchbylocoid}/${locoID}`);
}

同时搜索设置为

export class Search {
    input: string;
    warningMessages: String[];
    errorMessages: String[];
    numFound: number;
    results: String[];
    APP_CODE: string;
}

在我的组件上我有

logoSearchResults: Search[];
constructor(private data: DataAccessService) { }    
getLocmotives() {
    this.data.getAllLocosByID('A1').subscribe((res: Search[]) => {
    // console.log(Array.of(res));
    // console.log(typeof (response));
    // this.logoSearchResults = res;
    this.logoSearchResults = { ...res };
    console.log(this.logoSearchResults);
 },
  error => {
    console.log("error");
  })
}

这让我在浏览器控制台上关注。基于返回响应的 httpclient 文档已经是一个可观察的 json，我正在将其形成 Search[]

{input: "A1", warningMessages: Array(0), errorMessages: Array(0), numFound: 241, results: Array(3), …}

到目前为止，一切顺利！但让我们把它放在 HTML 部分，并显示给最终用户

我在 HTML 上放了一个按钮，可以点击

<button class="btn btn-primary" (click)="getLocmotives()">
   Give me answer
</button>
{{ logoSearchResults }}

这是我在屏幕上看到的 {{ logoSearchResults }}

[object object]

通过更新 HTML 代码循环遍历此数组到

<ul class="list-group">
  {{ logoSearchResults }}
  <li class="list-group-item" *ngFor="let result of logoSearchResults">
     {{ result }}
  </li>
</ul>

我遇到以下错误

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

通过将 HTML 代码更新为

<ul class="list-group">
 {{ logoSearchResults }}
 <li class="list-group-item" *ngFor="let result of Array.of(logoSearchResults)">
    {{ result }}
 </li>

我遇到以下错误

ERROR TypeError: Cannot read property 'of' of undefined

我应该在 HTML 或 angular 部分做什么才能在屏幕上显示我的数据？

Answer 1

尝试

<pre>{{ logoSearchResults | json}}</pre>

json pipe 会告诉你确切的 json.

< pre > 也会对齐 json 以便其可读。

Answer 2

你应该向 ngfor 添加一个数组：*ngFor="let result of logoSearchResults.results"

Answer 3

问题出在这一行 this.logoSearchResults = { ...资源}; 您将 res 放入对象中。你不能在对象上使用 of 循环。我看到你服务

this.http.get<Search[]>

应该return一个搜索数组，所以你应该

this.logoSearchResult=res;

然后在你的循环中更改为

{{ result|json }}

使用 angular 8 和 httpclient 获取 "Cannot read property 'of' of undefined"

Getting "Cannot read property 'of' of undefined" using angular 8, and httpclient

http

httpclient

angular

angular-httpclient