作者:mobiledu2502891283 | 来源:互联网 | 2023-01-04 12:19
我是Angular5的初学者,我需要你的帮助......
我在我的后端(Java/Spring Boot)中创建了一个API,我可以访问它 http://localhost:8080/applications
使用此API,我想检索一大块数据(它是一个JSON数组).
我尝试在我的Angular上使用httpClient检索数据,但我在前端有这个结果:[object Object]
这是我的app.component.ts
import {Component, Injectable} from '@angular/core';
import {HttpClient, HttpErrorResponse} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
url = 'http://localhost:8080/applications';
res = [];
constructor(private http: HttpClient) {
}
ngOnInit(): void {
this.http.get(this.url).subscribe(data => {
this.res = data;
console.log(data);
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log("Client-side error occured.");
} else {
console.log("Server-side error occured.");
}
});
}
}
我的应用程序界面Application.ts
interface Applications {
id : number;
type : string;
port : string;
baseUrl : string;
architecture : string;
protocol : string;
serveur : string;
}
如何显示我的数据?
提前致谢
1> Sinan Kayali..:
足够接近,试试这个:
在你的app.component.ts中你可以使用带有依赖注入的构造函数,不需要ngOnInit().还有一件事,我不确定你的API路线.你应该有类似http:// localhost:8080/[controller]/[action]
http:// localhost:8080/application/getall
http:// localhost:8080/api/application/getall - >这个是用于此示例.
import { Component, Inject } from '@angular/core';
import { Http from '@angular/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] })
export class AppComponent {
private url: 'http://localhost:8080/api/application/getall'
public apps: Applications[];
constructor(http: Http) {
http.get(url).subscribe(result => {
this.apps = result.json() as Applications[];
}, error => console.error(error));
}}
interface Applications {
id: number;
type: string;
port: string;
baseUrl: string;
architecture: string;
protocol: string;
serveur: string; }
在app.component.html中,让我们尝试使用无序列表
将
您想要的内容放入html中进行通话.
还有一步,在app.shared.module.ts中,您必须导入
组件import { AppComponent } from './components/app/app.component';
并将组件 添加到@NgModule声明[]
@NgModule({
declarations: [
//...
AppComponent
]
//...
我希望这有效