Проблема интерполяции угловой строки при использовании внешней библиотеки

Question

Я создаю приложение Angular 6 и получаю странное поведение с интерполяцией строк.

В приведенном ниже фрагменте кода я определяю наблюдаемое, а затем подписываюсь на него.Все работает нормально, все операторы console.log говорят, что должны, но по какой-то причине интерполяция строк, которая есть в моем HTML-файле, не обновляется.Я поместил {{myString}} в простой тег h3, и он не обновляется автоматически, даже если сама переменная установлена ​​правильно.Это как если бы изменение не было обнаружено.Я немного почитал и наткнулся на материал, который предполагал, что определенные типы вызовов могут выходить за пределы «зоны» углового обнаружения, но материал быстро поднялся выше моего уровня IQ.*

ngOnInit() {
    const myObservable = Observable.create((observer: Observer<string>) => {
      qrcode.callback = res => {
        observer.next(res);
        observer.complete();
      };
    });
    myObservable.subscribe((data: string) => {
      this.myString = data;
      console.log(data);
      console.log('myString value: ' + this.myString);
      if (this.myString == 'It works!') {
        console.log('The value was successfully matched');
      } else {
        console.log('The value did not match');
      }
    });
}

Answer 1

Import ChangeDetectorRef

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

Внедрить и создать его экземпляр

constructor(private ref: ChangeDetectorRef) { 
}

Наконец отметьте для проверки после установки значения myString, чтобы изменения произошли

this.ref.markForCheck();

Answer 2

Пожалуйста, используйте ловушки жизненного цикла, такие как ngDoCheck() или ngAfterViewInit(), если вы явно хотите выполнить обнаружение изменений на основе ваших требований.

ngOnInit() выполняется один раз при загрузке приложения, и код внутри него не будетвыполняется Angular, если вы не перезагрузите приложение.