要从 API 中获取数据,可以使用 Angular 7 中的 HttpClient 模块。以下是一个示例解决方案,该解决方案包含了从 API 中获取数据的代码示例:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
],
...
})
export class AppModule { }
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://api.example.com/data'; // 替换为你的 API 地址
constructor(private http: HttpClient) { }
getData(): Observable {
return this.http.get(this.apiUrl);
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from '路径/data.service';
@Component({
selector: 'app-your-component',
...
})
export class YourComponent implements OnInit {
data: any;
constructor(private dataService: DataService) { }
ngOnInit() {
this.getData();
}
getData() {
this.dataService.getData().subscribe(
(response) => {
this.data = response;
console.log(this.data);
},
(error) => {
console.log(error);
}
);
}
}
在上面的代码中,我们在 ngOnInit 方法中调用了 getData 方法,该方法通过 dataService 来获取数据。在订阅响应时,我们将数据赋值给组件中的 data 变量,并在控制台上打印出来。
请注意,你需要将路径/data.service.ts 替换为实际的路径,以确保正确导入服务。另外,你还需要将 https://api.example.com/data 替换为你的实际 API 地址。
这就是一个简单的示例解决方案,用于在 Angular 7 中从 API 中获取数据。你可以根据自己的需求进行修改和扩展。