표시 JSON 배열 5 HttpClient를 내가에 액세스 할 수 있습니다 내 백엔드 (자바/봄 부팅)에서 API를 만든</p> <p>

Question

내가 Angular5에서 초보자 그리고 난 당신의 도움이 필요 ... http://localhost:8080/applications

이 API를 사용하여 데이터 덩어리 (JSON Array)를 가져와야합니다. Json image

내가 내 각도에 세션 객체와 데이터를 검색하려고하지만 난 내 프론트 엔드에서이 결과를 가지고 : [개체 개체]

FrontEnd result

이 내 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."); 
      } 
      }); 

     } 

    } 

내 응용 프로그램 인터페이스 응용 프로그램 .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 ->이 예와 같이 사용해야합니다. 당신의 app.component.html에서

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

통화를 확인하기 위해 HTML에서 원하는 <app-root></app-root> 넣어 정렬되지 않은 목록

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

함께 해보자.

한 단계 더, 당신의 app.shared.module.ts에 당신은 당신의
구성 요소 import { AppComponent } from './components/app/app.component';을 가져 @NgModule 선언 []에 구성 요소를 추가해야

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

나는이

Answer 2

작동 희망

안녕하세요. # yupii7 많은 답변을 주셔서 감사합니다. 코드를 사용해 보았지만 Angular5에서는 작동하지 않습니다. 그러나, 나는 간단하게 사용하는 경우 : 그것은 완벽하게 작동

 

    public apps: Applications[]; 

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

:

을 지금, 나는이 테이블에 이러한 데이터를 전달할 수있는 방법을 찾을 필요가있다. 당신이 생각을 가지고 있다면 나는 그것을 듣게 될 것이다. :)

여기를 참조하십시오! 귀하의 의견을 추가하려면 50 개의 평판이 필요하므로 본인이 볼 수 있도록 여기에 의견을 남깁니다. 새로운 질문을해야합니다.angular material를 참조하거나 만들 자신 table

Answer 3

할 수 있습니다 단순히 각 파이프를 사용하여 방금보기에서 데이터 를 볼 필요가 있다면 그렇게

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