Угловой 7 Наблюдаемый номер не обновляет вид

Question

У меня проблема, я не знаю, почему переменная значения не обновляется, на мой взгляд, при использовании ее в наблюдаемой, спасибо за помощь:

import { Component, OnInit } from '@angular/core';
import { Observable, Observer } from 'rxjs';

@Component({
  selector: 'app-observables',
  templateUrl: './observables.component.html',
  styleUrls: ['./observables.component.css']
})
export class ObservablesComponent implements OnInit {
    observable: Observable<number>;
    value: number = 0;
    observer: Observer<number>;
  constructor() { }

    ngOnInit() {
        this.value = 10;
        this.observable = new Observable((observer: Observer<number>) => {
            this.observer = observer;
        });
        this.observable
            .subscribe(this.handleData, this.handleError, this.handleComplete);
        this.observer.next(12);
        this.observer.next(15);
        //this.observer.complete();
        this.observer.next(16);
    }

    handleData(data) {
        this.value = data;
        console.log('Here are the usable data', data);
    }

    handleComplete() {
        console.log('Complete');
    }

    handleError(error) {
        console.log('error:', error)
        return Observable.throw(error);
    }
}

И это мой взгляд:

{{ value }}

вот стек-блиц

Answer 1

Проблема в том, что код проигрывает this (он переназначается).Это можно исправить с помощью функций стрелок.

this.observable.subscribe((data) => this.handleData(data), (error) => this.handleError(error), () => this.handleComplete());

Назначение члена функции стрелки вместо объявления их как по существу функций также решает проблему.

handleData = (data) => {
    this.value = data;
    console.log('Here are the usable data', data);
}

handleComplete = () => {
    console.log('Complete');
}

handleError = (error) => {
    console.log('error:', error)
    return Observable.throw(error);
}

Answer 2

Вам не нужно observer, вам просто нужно иметь subject, чтобы вы могли next и complete subject и subscribe на observable как обычно, передавая обратный вызов или встроенные функции

    private subject : Subject<number> = new Subject<number>();
    observable$: Observable<number> = this.subject.asObservable();
    value: number = 0;

    constructor() { }

    ngOnInit() {
        this.value = 10;
        this.observable$
            .subscribe(this.handleData, this.handleError, this.handleComplete);
        this.subject.next(12);
        this.subject.next(15);
        //this.subject.complete();
        this.subject.next(16);
    }