显示 Json 数组 Angular 5 HttpClient

Posted 2023-02-22

【中文标题】显示 Json 数组 Angular 5 HttpClient

【英文标题】：Display Json Array 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：字符串； 架构：字符串； 协议：字符串； 服务器：字符串；

如何显示我的数据？

提前致谢

【参考方案1】：

够近了，试试这个： 在您的 app.component.ts 中，您可以只使用带有依赖注入的构造函数，不需要ngOnInit()。还有一件事，我不确定您的 API 路由。你应该有类似http://localhost:8080/[controller]/[action]http://localhost:8080/application/getallhttp://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>