Отображение простых данных JSON из консоли в HTML на Angular

Question

Я использую openhab для мониторинга датчиков.Но мне нужно вытащить / ввести предметы (вещи), свойства сенсора, конфигурацию комнаты через веб-интерфейс.Итак, у openhab есть REST-запросы, которые хорошо документированы здесь - https://docs.openhab.org/configuration/restdocs.html.

Я хотел разработать простой веб-интерфейс.(У меня нет опыта в веб-разработке раньше).Итак, я попытался следовать базовому учебнику в angular.io и по адресу - https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b.

Как показано в блоге, я могу получить объект JSON с помощью запроса Httpclient до консоли, но яхочу отобразить это в HTML, но я не нахожу ва, чтобы сделать это.Итак, до сих пор у меня есть следующие данные в консоли:

Но как отобразить в HTML, например, какие изменения мне нужно внести в app.component.html?Если я просто попробую -

{{data.login}}

, в HTML появится только строка data.login.

Я пытался искать сайты и блоги, но они описывали только способы выполнениязапрос и получение до консоли.Но мне это нужно было в HTML.

Мой код: (Все для начинающих - базовые коды и коды по умолчанию) app.component.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

Вы можете отредактировать ваш html примерно так:

<code><div style="text-align:center">
  <pre>
    {{ results | json }}
  

{{results.login}}

и т. д.

, а класс компонента должен иметь свойство, содержащее данные.Так что примите это как код класса

export class AppComponent implements OnInit {

  private results: any;

  constructor(private http: HttpClient)
  {
  }


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

Вот демо

Answer 2

Попробуйте это демо

 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 блок.