角度 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);
    }