使用外部库时出现角度字符串插值问题

Question

我正在创建一个Angular 6应用，并且通过字符串插值得到了一些奇怪的行为。

在下面的代码片段中，我定义了一个可观察对象，然后订阅它。 一切工作正常，所有console.log语句都在说应该做什么，但是由于某种原因，我在HTML文件中的字符串插值没有更新。 我将{{myString}}放在了一个简单的h3标签中，即使正确设置了变量本身，它也不会自动更新。 好像没有检测到更改。 我做了一些阅读，发现一些材料建议某些类型的通话可以超出角度检测的“范围”，但材料很快超过了我的智商水平。

任何输入建议，将不胜感激。

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

如果您明确希望根据自己的需求执行更改检测，请使用ngDoCheck()或ngAfterViewInit()类的生命周期挂钩。

ngOnInit()在应用程序加载时执行一次，Angular不会执行其中的代码，除非您重新加载应用程序。

Answer 2

导入ChangeDetectorRef

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

注入并实例化它

constructor(private ref: ChangeDetectorRef) { 
}

设置myString值后，最后标记以进行检查，以便进行更改

this.ref.markForCheck();