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();

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

2 个答案: