在Angular 9中消费REST API的解决方法可以通过以下步骤来实现:
ng new angular-rest-api-consumer
cd angular-rest-api-consumer
ng generate service api
api.service.ts
文件中,导入HttpClient
模块和Observable
类,并注入HttpClient
模块:import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
constructor(private http: HttpClient) { }
getPosts(): Observable {
return this.http.get('https://jsonplaceholder.typicode.com/posts');
}
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-root',
template: `
Posts
- {{ post.title }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
posts: any[];
constructor(private apiService: ApiService) { }
ngOnInit() {
this.apiService.getPosts().subscribe(posts => {
this.posts = posts;
});
}
}
在模板中使用*ngFor
指令来循环显示从REST API获取的数据。
运行应用程序:
ng serve
以上步骤将创建一个基本的Angular 9应用程序,它将使用API服务来消费REST API并在模板中显示数据。你可以根据需要修改代码以适应你的具体情况。