显示 Json 数组 Angular 5 HttpClient
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47908637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Json Array Angular 5 HttpClient
提问by KentLothbrok
I'm a beginner in Angular5 and I need your help...
我是 Angular5 的初学者，我需要你的帮助......
I made an API in my backend (Java/Spring Boot) which I can access with http://localhost:8080/applications
我在我的后端（Java/Spring Boot）做了一个 API，我可以访问它 http://localhost:8080/applications
With this API I want to retrieve a chunk of data (it's a JSON Array).
使用这个 API，我想检索一大块数据（它是一个 JSON 数组）。
I try to retrieve data with httpClient on my Angular but I have this result in my frontend : [object Object]
我尝试在我的 Angular 上使用 httpClient 检索数据，但我的前端有这个结果：[object Object]
This my app.component.ts
这是我的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.");
}
});
}
}
My Application interface Application.ts
我的应用程序界面Application.ts
interface Applications {
id : number;
type : string;
port : string;
baseUrl : string;
architecture : string;
protocol : string;
serveur : string;
}
How can I display my data ?
如何显示我的数据？
Thanks in advance
提前致谢
回答by Sinan
Close enough, try this:
in your app.component.ts you can just use the constructor with dependency injection, no need of ngOnInit(). One more thing, I'm not sure about your API Route. You should have something like http://localhost:8080/[controller]/[action]
http://localhost:8080/application/getall
http://localhost:8080/api/application/getall--> this one is used for this example.
足够接近，试试这个：
在你的 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; }
in your app.component.html let try with an unordered list
在您的 app.component.html 中尝试使用无序列表
<ul *ngIf="apps">
<li *ngFor="let app of apps">
{{app.Id}}
</li>
</ul>
Put <app-root></app-root>where you want in your html to make the call.
把<app-root></app-root>你想要的地方放在你的 html 中进行调用。
One more step, in your app.shared.module.ts you have to import your
component import { AppComponent } from './components/app/app.component';and add your component to @NgModule declarations[]
再一个步骤，在你的 app.shared.module.ts 你必须导入你的
组件 import { AppComponent } from './components/app/app.component';并将你的组件添加到 @NgModule 声明[]
@NgModule({
declarations: [
//...
AppComponent
]
//...
I hope this works
我希望这有效
回答by KentLothbrok
Hi #yupii7 thanks a lot to answer me. I try your code but it doesn't work in Angular5. But, when I simply use :
嗨#yupii7 非常感谢回答我。我尝试了你的代码，但它在 Angular5 中不起作用。但是，当我简单地使用：
public apps: Applications[];
this.http.get(this.url).subscribe(result => {
this.apps = result as Applications[];
}
It works perfectly :)
它完美地工作:)
Now, I need to find a way to push these data on a table. If you have an idea I will be happy to hear it. :)
现在，我需要找到一种方法将这些数据推送到表上。如果你有什么想法，我会很高兴听到的。:)
See here !To add a comment on yours I need 50 reputation, so I leave my comment here to make you see it. You need to ask a new question. See angular materialor make your own table
看这里 ！要对你的评论添加评论，我需要 50 声望，所以我在这里留下我的评论，让你看到它。你需要提出一个新问题。查看有角度的材料或制作自己的桌子
回答by nishil bhave
You can simply do that by using angular pipes if you just need to see data In view
如果您只需要查看数据，您可以简单地通过使用角度管道来做到这一点
<div>
{{res|json}}
</div>
