首页 文章

显示Json数组Angular 5 HttpClient

提问于
浏览 次
3

我是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']
    })

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

      }

    }

我的应用程序界面 Application.ts

interface Applications {

      id : number;
      type : string;
      port : string;
      baseUrl : string;
      architecture : string;
      protocol : string;
      serveur : string;

    }

如何显示我的数据？

提前致谢

json httpclient frontend display angular5

3 回答

  • 6

    足够接近，试试这个：
    在你的app.component.ts中你可以使用带有依赖注入的构造函数，不需要ngOnInit() . 还有一件事，我不确定你的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中要拨打电话的位置 .

    还有一步，在你的app.shared.module.ts中，你必须导入你的
    组件 import { AppComponent } from './components/app/app.component'; 并将您的组件添加到@NgModule声明[]

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

    我希望这有效

    回复于
  • 0

    嗨＃yupii7非常感谢你回答我 . 我尝试你的代码但它在Angular5中不起作用 . 但是，当我只使用：

    public apps: Applications[];

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

    它很完美:)

    现在，我需要找到一种方法将这些数据推送到表上 . 如果你有一个想法，我会很高兴听到它 . :)

    See here ! 要在你的评论上添加评论我需要50个声望，所以我在这里发表评论让你看到它 . 你需要问一个新问题 . 见angular material或自己制作table

    回复于
  • -1

    如果您只需要在视图中查看数据，则可以使用角度管道来执行此操作

    <div>
{{res|json}}
</div>
    回复于

相关问题