2017-12-20 23 views
0

ich Anfänger sind in Angular5 und ich brauche Ihre Hilfe ...Anzeige Json Array Angular 5 Httpclient

ich eine API in meinem Backend gemacht (Java/Frühjahr Boot), die ich mit http://localhost:8080/applications zugreifen kann

Mit dieser API möchte ich einen Datenblock abrufen (es ist ein JSON-Array). Json image

Ich versuche, auf mein Eckige mit Httpclient-Daten abrufen, aber ich habe dieses Ergebnis in meinem Frontend: [object Object]

FrontEnd result

Das ist mein 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."); 
      } 
      }); 

     } 

    } 

Meine Anwendungsschnittstelle Anwendung.ts

Wie kann ich meine Daten anzeigen?

Vielen Dank im Voraus

Antwort

2

Nahe genug, versuchen Sie dies:
in Ihrem app.component.ts können Sie nur den Konstruktor mit Dependency Injection verwenden, ohne die Notwendigkeit von ngOnInit(). Eine weitere Sache, ich bin mir nicht sicher über Ihre API-Route. Sie sollten etwas haben wie http://localhost:8080/[controller]/[action]http://localhost:8080/application/getall
http://localhost:8080/api/application/getall -> dieser wird für dieses Beispiel verwendet.

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 Ihrem app.component.html lassen versuchen, mit einer ungeordneten Liste

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

Put <app-root></app-root> wo Sie in Ihrem html wollen den Anruf zu tätigen.

Ein weiterer Schritt, in Ihrem app.shared.module.ts müssen Sie Ihre
Komponente import { AppComponent } from './components/app/app.component'; und fügen Sie Ihre Komponente @NgModule Erklärungen importieren []

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

Ich hoffe, das funktioniert

-1

Hallo # yupii7 vielen Dank, mir zu antworten. Ich versuche Ihren Code, aber es funktioniert nicht in Angular5. Aber, wenn ich einfach nutzen:

 

    public apps: Applications[]; 

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

Es funktioniert perfekt :)

Nun, ich brauche einen Weg zu finden, diese Daten auf einem Tisch zu schieben. Wenn Sie eine Idee haben, werde ich mich freuen, es zu hören. :)

Siehe hier! Um einen Kommentar zu deinem hinzuzufügen, brauche ich 50 Ruf, also hinterlasse ich hier meinen Kommentar, damit du es siehst. Sie müssen eine neue Frage stellen.Siehe angular material oder machen Sie Ihre eigenen table

-1

Sie können einfach tun, indem Sie mit eckigen Rohren, wenn Sie nur Daten müssen sehen Im Hinblick

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