变量更改后视图不更新

Question

我有一个事件触发了组件中的一个函数：

componentA.ts

    html = 'hey';

      this.onElementSelected(r => this.change());

      public change() {

      console.log(this.html);
      if (this.html === 'hey') {

        this.html = 'oh, hello!';
        console.log(this.html);
      } else {
        this.html = 'hey';
      }
  }

componentA.html

这是相关模板的代码：

<div *ngIf="html">{{html}}</div>

我可以通过 console.log() 看到 html 变量发生了变化，但它在模板中没有变化。 如何更新模板？请不要建议在模板中这样使用按钮：

  <button (click)="change()">Change</button>

我已经对此进行了测试并且它可以工作，但我需要由组件本身触发更改事件。

感谢您的帮助。

Answer 1

尝试在您的组件中注入 ngZone 并像这样在其运行函数中执行您的更改

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

class YourClass {

        constructor(private ngZone: NgZone) {
                this.htmlSource = new BehaviorSubject('hey');
               this.html$ = this.htmlSource.asObservable();
          }

     this.onElementSelected(r => this.change());

    public change() {
         console.log(this.htmlSource.value);
    this.ngZone.run(() => {
     if (this.htmlSource.value === 'hey') {
          this.htmlSource.next('oh, hello!');
         console.log(this.htmlSource.value);
     } else {
        this.htmlSource.next('hey');
     }

     });
   }
}

Answer 2

您是否使用过 ChangedetectionStrategy.OnPush？此选项将 Angular 与自动更新视图分离。因此，您必须告诉 Angular 何时应该更新视图。

如果是这样，告诉你的组件的视图更新：

1. 通过您的构造函数注入 ChangeDetectorRef：

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

...

constructor(private cd: ChangeDetectorRef) {}

1. 通过调用你的 change() 函数告诉 Angular 重新渲染组件 在 'this.html'-assignment 之后：

if (this.html === 'hey') {
        this.html = 'oh, hello!';
        this.cd.detectChanges();
...

Answer 3

尝试像这样使用带有 BehaviorSubject 的 Observable：

public html$: Observable<string>;
private htmlSource: BehaviorSubject<string>();
constructor() {
   this.htmlSource = new BehaviorSubject('hey');
   this.html$ = this.htmlSource.asObservable();
}
  this.onElementSelected(r => this.change());

  public change() {

  console.log(this.htmlSource.value);
  if (this.htmlSource.value === 'hey') {

    this.htmlSource.next('oh, hello!');
    console.log(this.htmlSource.value);
  } else {
    this.htmlSource.next('hey');
   }
}

然后在component.html中：

<div *ngIf="html$ | async as html">{{html}}</div>