web-dev-qa-db-fra.com

Affichage Json Array Angular 5 HttpClient

Je suis débutant dans Angular5 et j'ai besoin de votre aide ...

J'ai créé une API dans mon backend (Java/Spring Boot) à laquelle je peux accéder avec http://localhost:8080/applications

Avec cette API, je veux récupérer un bloc de données (c'est un tableau JSON).

 

J'essaye de récupérer des données avec httpClient sur mon Angular mais j'ai ce résultat dans mon frontend: [object Object]

 

C'est mon app.component.ts


 import {Component, Injectable} from '@ angular/core'; 
 importer {HttpClient, HttpErrorResponse} de "@ angular/common/http"; 
 import {Observable} de "rxjs/Observable"; 
 importer 'rxjs/add/operator/map'; 

 @Component ({
 Sélecteur: 'app-root', 
 TemplateUrl: './app.component.html',
 StyleUrls: [' ./app.component.scss'HER
} ) 

 classe d'exportation AppComponent {
 url = 'http: // localhost: 8080/applications'; 
 res = []; 

 constructeur (http privé: 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 ("Une erreur côté client est survenue."); 
} else {
 console.log ("Une erreur côté serveur est survenue . "); 
} 
}); 

 } 

 }

Mon interface d'application Application.ts


 Interface Applications {

 id: numéro; 
 type: chaîne; 
 port: chaîne; 
 baseUrl: chaîne; 
 architecture: chaîne; 
 protocole: chaîne; 
 serveur: string; 

 }

Comment puis-je afficher mes données?

Merci d'avance

jsonhttpclientfrontenddisplayangular5
3
KentLothbrok

Assez proche, essayez ceci:
dans votre app.component.ts, vous pouvez simplement utiliser le constructeur avec injection de dépendance, pas besoin de ngOnInit () . Une dernière chose, je ne suis pas sûr de votre itinéraire API. Vous devriez avoir quelque chose comme http: // localhost: 8080/[contrôleur]/[action]
http: // localhost: 8080/application/getall
http: // localhost: 8080/api/application/getall -> celui-ci est utilisé pour cet exemple.

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

dans votre app.component.html laissez-vous tenter avec une liste non ordonnée 

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

Mettez <app-root></app-root> où vous voulez dans votre code HTML pour passer l’appel.

Une étape de plus, dans votre app.shared.module.ts vous devez importer votre
composant import { AppComponent } from './components/app/app.component'; et ajoutez votre composant aux déclarations @NgModule [] 

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

J'espère que ça marche

6
yupii7