angular - 使用 Angular 8 和 httpclient 获取“无法读取未定义的属性”
问题描述
我已经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 上放了一个与 click 配合使用的按钮
<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 部分中做什么才能在屏幕上显示我的数据?
解决方案
您应该向 ngfor 添加一个数组: *ngFor="let result of logoSearchResults.results"