显示 Json 数组 Angular 5 HttpClient

Question

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

我在后端（Java/Spring 启动）中创建了一个 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'；

    @零件（{
      选择器：'app-root'，
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })

    导出 class AppComponent {
      url = 'http://localhost:8080/applications';
      资源 = [];

      构造函数（私有 http: HttpClient）{
      }


      ngOnInit(): void {

        this.http.get(this.url).订阅(数据=>{
            this.res = 数据；
            console.log（数据）；
        },
          （错误：HttpErrorResponse）=> {
            如果（err.error instanceof 错误）{
              console.log("Client-side error occured.");
            } 别的 {
              console.log("Server-side error occured.");
            }
          });

      }

    }

我的应用界面Application.ts


    界面应用程序{

      身份证号;
      类型：字符串；
      端口：字符串；
      baseUrl：字符串；
      体系结构：字符串；
      协议：字符串；
      服务器：字符串；

    }

如何显示我的数据？

提前致谢

Answer 1

足够接近了，试试这个：
在你的 app.component.ts 你可以只使用依赖注入的构造函数，不需要 . 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 --> 这个用于这个例子。

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中你必须导入你的
component import { AppComponent } from './components/app/app.component'; 并将你的组件添加到@NgModule declarations[]

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

我希望这有效

Answer 2

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


    public apps: Applications[];

    this.http.get(this.url).subscribe(result => {
            this.apps = result as Applications[];
        }

完美运行:)

现在，我需要找到一种方法将这些数据推送到 table。如果您有想法，我会很高兴听到。 :)

看这里！ 要对你的评论添加评论，我需要 50 声望，所以我在这里留下我的评论让你看到它。你需要问一个新问题。参见 angular material or make your own table

Answer 3

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

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

显示 Json 数组 Angular 5 HttpClient

Display Json Array Angular 5 HttpClient

frontend

json

httpclient

display

angular5