Принудительное обнаружение изменений при изменении значения угловой услуги

Question

У меня есть функция, которая проверяет значение наблюдаемой и на основе этого значения выполняет некоторую логику для изменения значения переменной, которую я определил в сервисе.Все работает должным образом, за исключением того, что измененное значение не отображается (не обновляется) в веб-компоненте посредством интерполяции строк при его изменении.Он корректно изменяется в сервисе (когда я console.log возвращается корректно), но просто по какой-то причине не получает его для обновления компонента.Я много читал о ngZone, ChangeDetectorRef и т. Д. И реализовывал эти стратегии в других областях, где у меня были проблемы с обновлением в прошлом, но по какой-то причине они здесь не работают.Приведенный ниже код, мы будем благодарны за любые указания, так как я какое-то время ударился об это.

//From the component where I'm performing the checks on the observable.  The component where I'm doing the string interpolation on the data service value is a different component

ngOnInit(){
this.myObservable$ = this.scanitservice.decodedString$.subscribe(data => {
      if (
        data ==
        this.adventuredata.exhibit[this.adventuredata.adventure.currentAmount]
          .target
      ) {
        this.adventuredata.sharedVariables.guideText =
          'You found the right clue!  Great job!  Answer the question correctly to claim your prize.';
        console.log(this.adventuredata.sharedVariables.guideText);
        this.showQuiz = true;
        this.changeDetector.detectChanges();
        console.log('Evaluated as matched');
      }
    });
}

//From the data service 
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AdventuredataService {
  constructor() {}
  
  sharedVariables = {
    guideText: '',
    quizText: ''
  };
 }

 <div class="card-body float-right m-0 p-0">
    <img
      src="{{ this.adventuredata.adventure.guideImage }}"
      alt=""
      class="card-img-top w-25 float-left"
    />
    <span class="card-text p-0">
      {{ this.adventuredata.sharedVariables.guideText }}
    </span>
  </div>