显示 Json 数组 Angular 5 HttpClient答案

【问题标题】：Display Json Array Angular 5 HttpClient显示 Json 数组 Angular 5 HttpClient
【发布时间】：2018-06-03 04:00:57
【问题描述】：

我是 Angular5 的初学者，我需要你的帮助...

我在后端（Java/Spring Boot）中创建了一个 API，我可以使用 http://localhost:8080/applications 访问它

通过这个 API，我想检索一大块数据（它是一个 JSON 数组）。

我尝试在我的 Angular 上使用 httpClient 检索数据，但我的前端有这个结果：[object Object]

这是我的 app.component.ts

从“@angular/core”导入 {Component, Injectable}；从“@angular/common/http”导入 {HttpClient, HttpErrorResponse}；从“rxjs/Observable”导入 {Observable}；导入'rxjs/add/operator/map'； @零件（{ 选择器：'应用程序根'， templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) 导出类 AppComponent { url = 'http://localhost:8080/applications'; 水库= []; 构造函数（私有http：HttpClient）{ } ngOnInit(): 无效 { this.http.get(this.url).subscribe(data => { this.res = 数据；控制台.log（数据）； }, （错误：HttpErrorResponse）=> { if (err.error instanceof Error) { console.log("发生客户端错误"); } 别的 { console.log("发生服务器端错误。"); } }); } }

我的应用界面Application.ts

接口应用程序{ 身份证号码; 类型：字符串；端口：字符串； baseUrl：字符串；架构：字符串；协议：字符串；服务器：字符串； }

如何显示我的数据？

提前致谢

【问题讨论】：

标签： json httpclient frontend display angular5

【解决方案1】：

够近了，试试这个：
在您的 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 中尝试使用无序列表

<ul *ngIf="apps">
   <li *ngFor="let app of apps">
      {{app.Id}}
   </li>
</ul>

将 <app-root></app-root> 放在 html 中您想要拨打电话的位置。

还有一步，在您的 app.shared.module.ts 中，您必须导入您的
组件import { AppComponent } from './components/app/app.component'; 并将您的组件添加到@NgModule 声明[]

@NgModule({
  declarations: [
   //...
   AppComponent
  ]
  //...

我希望这行得通

【讨论】：

【解决方案2】：

您好#yupii7 非常感谢您回答我。我尝试了您的代码，但它在 Angular5 中不起作用。但是，当我简单地使用：

公共应用程序：应用程序[]； this.http.get(this.url).subscribe(result => { this.apps = 结果为 Applications[]; }

效果很好:)

现在，我需要找到一种方法将这些数据推送到表格中。如果你有一个想法，我会很高兴听到它。 :)

看这里！ 要对你的评论添加评论，我需要 50 声望，所以我把评论留在这里让你看到。你需要问一个新问题。请参阅angular material 或创建自己的table

【讨论】：

【解决方案3】：

如果您只需要查看数据，只需使用角管道即可在视图中

<div>
{{res|json}}
</div>

【讨论】：