Data Return with Angular

Question

I have a service with the following structure:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import 'rxjs-compat/add/operator/map';
import {map} from 'rxjs/operators';

@Injectable()
export class BlockchainService {
    constructor(private http: HttpClient) { }
    url = 'https://blockchain.info/q/getdifficulty';

    getDifficulty() {
        return this.http.get(this.url)
            .pipe(map(res => res)) // pega os dados sempre q estiver disponível e remapeia
            .subscribe(data  => data, error => console.log('erro')); // subscribe ouve um observable
    }
}

And I’m calling it that

import {Component} from '@angular/core';
import {BlockchainService} from '../blockchain.service';
import {Subscriber, Subscription} from 'rxjs';
import * as util from 'util';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  dificuldade: Subscription;
  constructor(blockchainService: BlockchainService) {
   this.dificuldade = blockchainService.getDifficulty();
  }


}

The problem is that on the front, when calling with interpolation {{dificuldade}}, only returns [object Object] and, when inspecting, it has the following structure, which does not contemplate the data it should receive

{ closed: false, _parentOrParents: null, _subscriptions: [ { closed: false, _parentOrParents: [Circular], _subscriptions: [Object], syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: true, isStopped: false, destination: [Circular], project: [Function], count: 0, thisArg: [Circular] } ], syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: true, isStopped: false, destination: { closed: false, _parentOrParents: null, _subscriptions: null, syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: false, isStopped: false, destination: { closed: true, next: [Function: next], error: [Function: error], complete: [Function: complete] }, _parentSubscriber: [Circular], _context: [Circular], _next: [Function], _error: [Function], _complete: undefined } }

How should I get this data correctly? If I pass one console.log in the first subscribe parameter, I can print the desired way in the console

Answer 1

Try it this way:

{{dificuldade|async}}

if pq difficulty is an observable and not your data itself.