使用HttpClient发出get请求

Question

我已经编写了以下代码来获取这里的虚拟数据:

export class AppComponent {

jsonPosts: any = [];
constructor(private httpClient: HttpClient) { }
OnInit() {
this.getJsonPosts();
}
getJsonPosts(): any {
return this.httpClient.get("https://jsonplaceholder.typicode.com/posts")
.subscribe(response => {
console.log(response);
this.jsonPosts = response;
});
}

我还编写了以下代码来显示它们在我的HTML模板中:

<ul *ngFor="let i of jsonPosts">
<li>{{i.userId}}</li>
<li>{{i.id}}</li>
<li>{{i.title}}</li>
<li>{{i.body}}</li>
</ul>

然而，根本没有网络活动，因此没有显示…

我在这里做错了什么?

Answer 1

您没有调用OnInit方法。如果你想让angular lifecycle调用你的方法，你的组件必须用ngOnInit方法实现OnInit接口。

。

所以你的组件代码应该是这样的:

export class AppComponent implements OnInit {

jsonPosts: any = [];
constructor(private httpClient: HttpClient) { }
ngOnInit(): void {
this.getJsonPosts();
}
getJsonPosts(): any {
return this.httpClient.get("https://jsonplaceholder.typicode.com/posts")
.subscribe(response => {
console.log(response);
this.jsonPosts = response;
});
}