显示Json Array Angular 5 HttpClient [英] Display Json Array Angular 5 HttpClient

问题描述

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

I'm a beginner in Angular5 and I need your help...

我在后端(Java/Spring Boot)中制作了一个API，可以通过http://localhost:8080/applications

I made an API in my backend (Java/Spring Boot) which I can access with http://localhost:8080/applications

使用此API，我想检索一大块数据(这是一个JSON数组).

With this API I want to retrieve a chunk of data (it's a JSON Array).

我尝试使用Angular上的httpClient检索数据，但是在前端出现了以下结果:[object Object]

I try to retrieve data with httpClient on my Angular but I have this result in my frontend : [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;

    }

如何显示我的数据?

预先感谢

推荐答案

足够接近，请尝试以下操作:
在您的app.component.ts中，您可以仅使用带有依赖项注入的构造函数，而无需 ngOnInit().还有一件事，我不确定您的API路由.您应该有类似 http://localhost:8080/[controller]/[action]
http://localhost:8080/application/getall
http://localhost:8080/api/application/getall ->这个用于这个例子.

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.

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中，尝试使用无序列表

in your app.component.html let try with an unordered list

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

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

Put <app-root></app-root> where you want in your html to make the call.

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

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[]

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

我希望这行得通

这篇关于显示Json Array Angular 5 HttpClient的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！