我正在学习如何使用 angular 的新 http 客户端模块。当我尝试使用其余 api 时,我收到错误无法读取未定义的属性“数据”。
这是我的 app.html,
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<button (click)="getPosts()">Get Posts</button>
<div *ngFor="let result of results.data">
{{ result | json }}
</div>
</div>
这是我的 app.component.ts
import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
interface ItemsResponse {
data: any[];
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
results: any;
// Inject HttpClient into your component or service.
constructor(private http: HttpClient) {}
title = 'School2College';
ngOnInit(): void {
}
getPosts() {
this.http.get<ItemsResponse>('https://reqres.in/api/users?page=3').subscribe(res =>
this.results = res);
}
}
为什么我收到错误无法读取未定义的属性“数据”?
最佳答案
由于您是在进行异步请求,因此最初结果将是未定义的,请使用 safe navigation operator
检查结果是否存在,然后访问数据
<div *ngFor="let result of results?.data">
{{ result | json }}
</div>
关于Angular 的新 http 客户端错误无法读取未定义的属性 'data',我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46949411/