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

问题描述

我是 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';@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})导出类 AppComponent {url = 'http://localhost:8080/applications';res = [];构造函数(私有 http:HttpClient){}ngOnInit(): 无效 {this.http.get(this.url).subscribe(data => {this.res = 数据；控制台日志(数据)；},(错误:HttpErrorResponse)=> {if (err.error instanceof Error) {console.log("发生客户端错误.");} 别的 {console.log("发生服务器端错误.");}});}}

我的应用界面Application.ts

<前>接口应用{身份证号码;类型:字符串；端口:字符串；baseUrl : 字符串；架构:字符串；协议:字符串；服务器:字符串；}

如何显示我的数据?

提前致谢

解决方案

足够接近，试试这个:
在您的 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';导入 { Http from '@angular/http';@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.scss'] })导出类 AppComponent {私人网址:'http://localhost:8080/api/application/getall'公共应用程序:应用程序[]；构造函数(http:Http){http.get(url).subscribe(result => {this.apps = result.json() as Applications[];}, 错误 =>控制台错误(错误))；}}接口应用{身份证号码;类型:字符串；端口:字符串；baseUrl:字符串；架构:字符串；协议:字符串；服务器:字符串；}

在您的 app.component.html 中尝试使用无序列表

<li *ngFor="让应用程序的应用程序">{{app.Id}}

将 放在 html 中您想要调用的位置.

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

@NgModule({声明: [//...应用组件]//...

我希望这有效

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

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

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

I try to retrieve data with httpClient on my Angular but I have this result in my frontend : [object Object]

This my 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

    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

解决方案

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; }

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

<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.

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
  ]
  //...

I hope this works

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