在Angular 4中显示页面中的结果

Question

我正在尝试从数据库（Arangodb）中提取数据并将其显示在页面上，甚至将其推送到下一页。截至目前，我可以通过单击按钮在控制台中显示数据。但我只想在角度页面中显示输出而不是在控制台中。

我该如何解决这个问题？

app.component.ts

HEAD

app.component.html

import { Component } from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {
title = 'app';
constructor(private http: Http) {}

server_wsdl_get(){
return this.http.get(this.apiUrl)
.map((res: Response) => res.json())
}

 client_wsdl_get() {
   this.server_wsdl_get().subscribe(data => {
   console.log(data);
   this.data = data;
   })
 }
}

我希望此结果显示在不在控制台中的角度页面中。

Answer 1

准确地说，您必须在使用之前声明您的类字段（this.data）：

import {Component} from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {
  data: any;
  title = 'app';

  constructor(private http: Http) {
  }

  server_wsdl_get() {
    return this.http.get(this.apiUrl)
        .map((res: Response) => res.json())
  }

  client_wsdl_get() {
    this.server_wsdl_get().subscribe(data => {
      console.log(data);
      this.data = data;
    })
  }
}

现在在模板中，您可以使用以下方式显示数据：

<span>{{data?.type}}</span>

运算符?.确保在尚未定义data时不会出现错误（当您希望获得未定义的属性时，您获得TypeError: Cannot read property '' of undefined）。解决此问题的其他方法是提供默认数据值或使用*ngIf.