RxJS ReplaySubject не обновляет угловую зону

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}`);
      },
      () => { }
    );
  }
}

Компонент:

import {ExampleService} из './example.service';Класс экспорта 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.");
    }

)}}

И HTML для ExampleService выглядит следующим образом:

{{ valueOnFrontend }}

Таким образом, значение обновляетсядолжным образом в службе, то он правильно передается компоненту, console.log в компоненте записывает новое значение, однако привязка HTML не обновляется.

Я прочитал, что RxJS работает самостоятельноЗона, а Угловая Зона не знает об обновлениях в ней.Как я могу это исправить и получить значение для обновления в 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."); 
  }
);