it-swarm.com.de

Json Array Angular 5 HttpClient anzeigen

Ich bin ein Anfänger in Angular5 und brauche deine Hilfe ...

Ich habe eine API in meinem Backend (Java/Spring Boot) erstellt, auf die ich mit http://localhost:8080/applications zugreifen kann.

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

 

Ich versuche, Daten mit httpClient auf meinem Angular abzurufen, aber ich habe dieses Ergebnis in meinem Frontend: [object Object]

 

Dies ist mein app.component.ts

 import {Component, Injectable} aus '@ angle/core'; 
 importiere {HttpClient, HttpErrorResponse} von "@ angle/common/http"; 
 importieren {Observable} aus "rxjs/Observable"; 
 Importieren Sie 'rxjs/add/operator/map'; 

 @Component ({
 Selector: 'app-root', 
 TemplateUrl: './app.component.html' ,
 StyleUrls: ['./app.component.scss'iere
} ) 

 Exportklasse AppComponent {
 url = 'http: // localhost: 8080/applications'; 
 res = []; 

 Konstruktor (privates http: HttpClient) {
 } 


 ngOnInit (): ungültig {

 this.http.get (this.url) .subscribe (data => {
 this.res = data; 
 console.log (data); 
}, .__ (err: HttpErrorResponse) = > {
 if (Fehlerfehlerinstanz) {
 console.log ("Clientseitiger Fehler ist aufgetreten."); 
} else {
 console.log ("Serverseitiger Fehler ist aufgetreten . "); 
} 
}); 

 } 

 } 

Meine Anwendungsschnittstelle Application.ts

 Schnittstellenanwendungen {

 ID: Nummer; 
 Typ: Zeichenfolge; 
 port: string; 
 baseUrl: Zeichenfolge; 
 Architektur: Zeichenfolge; 
 Protokoll: Zeichenfolge; 
 serveur: string; 

 } 

Wie kann ich meine Daten anzeigen?

Danke im Voraus

3
KentLothbrok

Nah genug, probieren Sie es aus:
In Ihrer app.component.ts können Sie den Konstruktor einfach mit Abhängigkeitseinspritzung verwenden, wobei ngOnInit () nicht erforderlich ist. Noch eine Sache, ich bin nicht sicher über Ihre API-Route. Sie sollten etwas wie http: // localhost: 8080/[Controller]/[action] haben.
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 Ihrer app.component.html versuchen Sie es mit einer ungeordneten Liste 

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

Geben Sie <app-root></app-root> an der gewünschten Stelle in Ihrer HTML-Datei ein, um den Aufruf zu tätigen.

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

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

Ich hoffe das funktioniert

6
yupii7

Hallo # yupii7, vielen Dank für die Antwort. Ich probiere deinen Code aus, aber er funktioniert in Angular5 nicht. Aber wenn ich einfach benutze:

 
 öffentliche Apps: Anwendungen []; 
 
 this.http.get (this.url) .subscribe (result => {
 this .apps = Ergebnis als Anwendungen []; 
} 
 

Es funktioniert perfekt :)

Jetzt muss ich einen Weg finden, um diese Daten auf eine Tabelle zu übertragen. Wenn Sie eine Idee haben, würde ich mich freuen, sie zu hören. :)

Sehen Sie hier! Um einen Kommentar zu Ihrem Namen hinzuzufügen, benötige ich 50 Ruf, also lasse ich meinen Kommentar hier, damit Sie ihn sehen können. Sie müssen eine neue Frage stellen. Siehe eckiges Material oder mache dein eigenes Tabelle

0
KentLothbrok