Angular 8 Observable Returns "_isScalar: false ..." - PullRequest
Новая
       25

Angular 8 Observable Returns "_isScalar: false ..."

0 голосов
/ 09 июня 2019

Просто пытаюсь просто отобразить содержимое объекта JSON из запроса GET.

Служба: 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LightsService {

  constructor(private http: HttpClient) {}

  fetchLights(): Observable<Object> {
    const URL = 'http://****/api/S97t-zlmOCIeKXxQzU66WxWLY2z6oKenpLM95Uvt/lights';
    console.log('Service');
    return this.http.get(URL);
  }
}

Компонент: 

import { Component } from '@angular/core';
import { LightsService } from './lights.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  lights;
  constructor(private lightsService: LightsService) {}

  fetchLights() {
    console.log('Component');
    this.lights = this.lightsService.fetchLights();
    console.log(this.lights);
  }
}

HTML: 

<button (click)="fetchLights()">Fetch Lights</button>

<ul>
  <li *ngFor="let light of lights | keyvalue">{{light.key}}:{{light.value}}</li>
</ul>

Я бы предпочел не использовать канал 'keyvalue', но, похоже, это единственный способ получить что-либо возвращаемое вообще, однако вот скриншот того, что возвращается, когда функцияназывается:

enter image description here

Ответы [ 2 ]

1 голос
/ 09 июня 2019

Наблюдаемое не может использоваться в качестве значения.

Вы должны использовать трубу async, чтобы получить значение наблюдаемой.

0 голосов
/ 10 июня 2019

Чтобы иметь чистое решение, лучше создать интерфейс того, что возвращает служба: 

interface Lights{
    label1: string;
    label2: string;
    ect ect
}

Чем в вашем сервисном файле: 

fetchLights(): Observable<Lights> {
    const URL = 'http://****/api/S97t-zlmOCIeKXxQzU66WxWLY2z6oKenpLM95Uvt/lights';
    console.log('Service');
    return this.http.get<Lights>(URL);
  }

Вам нужно подписать свою наблюдаемую в AppComponent следующим образом: 

public lights: Lights;

fetchLights() {
    console.log('Component');
   this.lightsService.fetchLights().subscribe((lights: Lights) => {
   this.lights = lights
  });

  }
...