显示Json数组Angular 5 HttpClient

Question

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

我在我的后端(Java/Spring Boot)中创建了一个API,我可以访问它 http://localhost:8080/applications

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

我尝试在我的Angular上使用httpClient检索数据,但我在前端有这个结果:[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;

    }

如何显示我的数据？

提前致谢

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

我希望这有效