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在其自己的区域中运行，而Angular区域并不知道其中的更新。我该如何解决此问题，并获取要在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."); 
  }
);

RxJS ReplaySubject无法更新Angular Zone

2 个答案: