Subscription is not updating template variable

Question

I am working on a browser speech accessibility tool and wanted to show the user the interim results as they are speaking.

The issue I am facing is when receiving data from the speech service the consumer subscription side is not changing the template variable as expected.

ngOnInit(): void {
    console.log("OnInit -- subscribing");
    this._subscription = this.speech
      .speechInput()
      .pipe(debounceTime(100), distinctUntilChanged())
      .subscribe((s) => {
        if (this.speech.getLastPhrase() != null)
          this.updateFinalResult(this.speech.getLastPhrase());
        this.updateInterimResult(s);  // <------- This call updates `interimResults` variable
        console.log("Subscribe text " + s);
      });
  }

When getting results from the service I can see the console.log response but this.updateInterimResults(s) does not update the template. The only way to see changes is by clicking the button. I don't know why the button makes the variables update.

<div>Interim Results: {{interimResults}}</div>
<div>Final Results: {{finalResults}}</div>

<button
  (click)="toggleMic()"
  [style]="microphone ? 'background-color: white' : 'background-color: red'"
  [textContent]="microphone ? 'Record' :'Listening...'"
></button>

Proof of concept demo

Check out this reply: https://stackoverflow.com/a/51169586/14192128 — Faustyn Piechowiak, Mar 09 '22 at 08:23

score 0 · Answer 1 · answered Jul 01 '22 at 08:57

You can use ChangeDetectorRef to force the template to check for changes in the variables.

constructor(private cd: ChangeDetectorRef) { ... }

this._subscription = this.speech
   .speechInput()
   .pipe(debounceTime(100), distinctUntilChanged())
   .subscribe((s) => {
      if (this.speech.getLastPhrase() != null)
        this.updateFinalResult(this.speech.getLastPhrase());
      this.updateInterimResult(s);
      this.cd.detectChanges();
      console.log("Subscribe text " + s);
   });

If it still doesn't work try adding it inside updateInterimResult instead.

Subscription is not updating template variable

1 Answers1