web-dev-qa-db-ja.com

JSON配列の表示Angular 5 HttpClient

私は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']
}）
 
エクスポートクラスAppComponent {
 url = 'http：// localhost：8080/applications'; 
 res = []; 
 
コンストラクタ（プライベート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（ "クライアント側エラーが発生しました。 "）; 
} else {
 console.log（"サーバー側エラーが発生しました。 "）; 
} 
}）; 
 
} 
 
}

私のアプリケーションインターフェイスApplication.ts

 
インターフェイスアプリケーション{
 
 id：番号; 
タイプ：文字列; 
ポート：文字列; 
 baseUrl：文字列; 
アーキテクチャ：文字列; 
プロトコル：文字列; 
 serveur：文字列; 
 
}

データを表示するにはどうすればよいですか？

前もって感謝します

jsonhttpclientfrontenddisplayangular5
5
KentLothbrok

十分に近く、これを試してください：
app.component.tsでは、依存関係注入を伴うコンストラクターを使用するだけでよく、 ngOnInit（） は不要です。もう1つ、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内のどこに呼び出しを行うか。

もう1つのステップは、app.shared.module.tsで、
コンポーネントimport { AppComponent } from './components/app/app.component';を追加して、コンポーネントを@NgModule宣言に追加します[]

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

これがうまくいくことを願っています

7
Sinan

こんにちは＃yupii7回答ありがとうございます。私はあなたのコードを試してみましたが、Angular5では機能しません。しかし、私が単に使用するとき：

 
公開アプリ：アプリケーション[]; 
 
 this.http.get（this.url）.subscribe（result => {
 this .apps =アプリケーションとしての結果[]; 
}

それは完全に動作します:)

次に、これらのデータをテーブルにプッシュする方法を見つける必要があります。あなたがアイデアを持っているなら、私はそれを聞いて幸せです。 :)

ここを参照してください！あなたのコメントを追加するには、50の評判が必要なので、コメントをここに残して、あなたに見られるようにします。新しい質問をする必要があります。 角度のある資料 を参照するか、独自に作成してください table

1
KentLothbrok