Невозможно сразу увидеть данные в элемент div из наблюдаемой

Question

Подскажите, пожалуйста, где я неправильно понял мой код? У меня есть наблюдаемое от qrScanner. Я получаю данные из этой наблюдаемой, а затем помещаю их в переменную, которую я хочу показать в HTML. Если я использую оповещение, как только я выйду из оповещения, данные, которые я получил из наблюдаемой, отображаются в html. Но если я не использую оповещение, данные из наблюдаемой не отображаются немедленно, но как только я нажимаю на кнопку «сканирование», наблюдаемая публикуется. Почему это так? Пожалуйста, смотрите мой код ниже:

.ts

scannedData: string = '';
scan() {
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if(status.authorized) {
          this.qrScanner.enableLight();

          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            this.scannedData = text; // I place the value onto this var
            this.qrScanner.hide();
            scanSub.unsubscribe();
          });

          this.qrScanner.resumePreview();

          this.qrScanner.show();

        } else if (status.denied) {
          this.presentAlert('Access to camera is permanently denied.');
            // camera permission was permanently denied
           // you must use QRScanner.openSettings() method to guide the user to the settings page
           // then they can grant the permission from there
        } else {
          this.presentAlert('Access to camera is denied.');
          // permission was denied, but not permanently. You can ask for permission again at a later time.
        }
      })
      .catch((e: any) => this.presentAlert('Error: '+e));
}

.html

<div>
    <button ion-button block (click)="scan()">Scan</button>
    <div>
      <br>
      <span><h3>{{ scannedData }}</h3></span> <=== I do not see the observable until I press the 'scan' button again
    </div> 
  </div>

Answer 1

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

component.ts

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef)
 { //...}

scan()
{ //...

 let scanSub = this.qrScanner.scan().subscribe((text: string) => {
        this.scannedData = text;
        this.qrScanner.hide();
        scanSub.unsubscribe();
        this.cdr.detectChanges();
      });

Answer 2

Поскольку нажатие кнопки запускает функцию scan(), которая извлекает scannedData из вашего сервиса.Пока вы не нажмете на нее, scannedData будет иметь значение по умолчанию, которое вы присвоили ему в начале (пустая строка).

Если вы хотите получить эту переменную, как только компонент визуализируется, вы должныпереместить логику внутрь ngOnInit.