javascript - 在 Angular 中显示从控制台到 HTML 的简单 JSON 数据

Question

我正在使用openhab用于传感器监控。但我需要通过网络界面拉/注入(inject)元素、传感器属性、房间配置。因此，openhab 有 REST 查询，这里有详细记录 - https://docs.openhab.org/configuration/restdocs.html 。

我想开发一个简单的 Web GUI。 (我之前没有Web开发经验)。因此，我尝试遵循 angular.io 和 - https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b 上的基本教程。 。

如博客中所示，我能够通过 Httpclient 查询检索 JSON 对象直到控制台，但我想在 HTML 中显示它，但我找不到 wa 来执行此操作。所以，到目前为止我在控制台有以下数据:

但是如何在HTML中显示，比如我必须在app.component.html中进行哪些更改？如果我只是尝试 -

{{data.login}}

，则只有字符串 data.login 出现在 HTML 中。

我尝试搜索网站和博客，但它们仅描述了如何执行查询和获取控制台的方法。但我在 HTML 中需要它。

我的代码:(均为初学者级别 - 基本代码和默认代码) 应用程序组件.ts

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  results = '';

  constructor(private http: HttpClient)
  {
  }


  ngOnInit(): void {
    this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(data => {
      console.log("User Login: " + data.login);
      console.log("Bio: " + data.bio);
      console.log("Company: " + data.company);
    });
  } 
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

interface UserResponse {
  login: string;
  bio: string;
  company: string;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>



<h2>Here are some links to help you start: </h2>



<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

非常感谢您的帮助。

Answer 1

尝试this demo

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'app';
  results = {};

  constructor(private http: HttpClient)
  {
  }


  ngOnInit(): void {
    this.http.get('https://api.github.com/users/seeschweiler').subscribe(data => {
      this.results =  data;
    });
  } 
}

在 html 中:

{{results.login}}

您无法渲染 {{data.login}}，因为它是 subscribe block 内的局部变量。