json - 显示 Json 数组 Angular 5 HttpClient

Question

我是 Angular5 的初学者，我需要你的帮助...

我在我的后端(Java/Spring Boot)中创建了一个 API，我可以通过 http://localhost:8080/applications 访问它

使用这个 API，我想检索一大块数据(它是一个 JSON 数组)。



我尝试在我的 Angular 上使用 httpClient 检索数据，但我的前端有这个结果:[object Object]



这是我的 app.component.ts

从“@angular/core”导入 {Component, Injectable}；
从“@angular/common/http”导入 {HttpClient, HttpErrorResponse}；
从“rxjs/Observable”导入 {Observable}；
导入'rxjs/add/operator/map'；

@零件({
选择器:'应用程序根'，
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

导出类 AppComponent {
url = 'http://localhost:8080/applications';
水库= [];

构造函数(私有(private)http:HttpClient){
}

ngOnInit(): 无效 {

this.http.get(this.url).subscribe(data => {
this.res = 数据；
控制台.log(数据)；
},
(错误:HttpErrorResponse)=> {
if (err.error instanceof Error) {
console.log("发生客户端错误");
} 别的 {
console.log("发生服务器端错误。");
}
});

}

}

我的应用界面应用程序.ts

接口(interface)应用程序{

身份证号码;
类型:字符串；
端口:字符串；
baseUrl:字符串；
架构:字符串；
协议(protocol):字符串；
服务器:字符串；

}

如何显示我的数据？

提前致谢

Answer 1

足够接近，试试这个:
在您的 app.component.ts 中，您可以使用带有依赖注入(inject)的构造函数，不需要 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
  ]
  //...

我希望这有效