从 Angular 中的服务 API Rest 返回 JSONArray

Question

我对Angular和API Rest相当陌生。我想从服务调用一个 URL 并使用 JSONArray 进行响应。例如：https://jsonplaceholder.typicode.com/posts

我正在从 App.component 调用服务并返回一个 JSONArray，但它仅从控制台显示。

我的应用组件：

import { Component, OnInit } from '@angular/core';
import { DataApiService } from 'src/app/services/data-api.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private rest: DataApiService) { }
ngOnInit() {
this.getListProducts();
}
getListProducts(){
this.rest.getAllProducts().subscribe(data => {
console.log(data);
});
}
}

我的服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataApiService {
constructor(private http: HttpClient) { }
getAllProducts(){
const localUrl = 'assets/data/smartphone.json';
return this.http.get(localUrl);
}
}

Answer 1

以下是您如何访问数据

声明变量

myData:any;

然后捕获该数据

catchAndPrint(data)
{
this.myData:any=data;
console.log("Return data :",this.myData);
}

在您的函数中

ngOnInit() {
this.getListProducts();
}
getListProducts(){
this.rest.getAllProducts().subscribe(data => {
this.catchAndPrint(data);
});
}