RxJS ReplaySubject 没有更新 Angular Zone

Question

我有一个 ReplaySubject 变量正在服务上更新，并且组件正确获取新值，但它似乎没有更新视图（HTML 中的绑定保持为空，即使变量已正确更新)。

服务：

export class ExampleService {
  myVariable;

  constructor(private http: HttpClient, private userModel: UserModel) { 
    this.myVariable = new ReplaySubject(1);

    this.getApiRoot(`/api/endpoint`)
    .subscribe(
      data => { 
        this.myVariable.next(data);
      },
      err => { 
        console.log(`Database connection error: ${err}`);
      },
      () => { }
    );
  }
}

组件：

从 './example.service' 导入 { ExampleService }; 导出类 myComponent 实现 OnInit {

valueOnFrontend: string;

constructor(exampleService: ExampleService) {};

ngOnInit() {
    this.exampleService.myVariable.subscribe(
    function(value) {
        console.log(this.valueOnFrontend);
        this.valueOnFrontend = value;
    },
    function(error) {
        console.log(err);
    },
    function() {
        console.log("Request completed.");
    }

) } }

ExampleService 的 HTML 如下：

{{ valueOnFrontend }}

所以该值在服务中被正确更新，然后它被正确地发送到组件，组件中的console.log 记录了新值，但是 HTML 绑定没有得到更新。

我读到 RxJS 在它自己的 Zone 中运行，Angular Zone 不知道其中的更新。我该如何解决这个问题，并在 HTML 中获取要更新的值？

谢谢。 :P

Answer 1

您是否可以选择通过模板中的异步管道访问可观察的exampleService.myVariable 而无需订阅后面的代码？喜欢：

{{exampleService?.myVariable | async}}

Answer 2

组件中的订阅回调应该使用粗箭头来表示正确的范围

this.exampleService.myVariable.subscribe( 
  (value: any) => { 
    console.log(this.valueOnFrontend);
    this.valueOnFrontend = value; 
  }, 
  (error: any) => { 
    console.log(err); 
  }, () => { 
    console.log("Request completed."); 
  }
);