typescript - Angular 2 (TypeScript) 中的 *ngIf 问题

Question

我正在使用 Angular 2 beta (TypeScript)。我遇到了一个奇怪的问题。我尝试了 Chrome、Firefox、Opera，结果都一样。

当我点击“切换”按钮时，它可以成功显示/隐藏文本“Hello World!”。

当我使用套接字从另一个浏览器发送命令时， bool 值“show”成功更改了背景，但是，文本没有显示/隐藏，看起来页面没有刷新。

import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/bootstrap';
import {NgIf} from 'angular2/common';

@Component({
    selector: 'app'
})
@View({
    directives: [NgIf],
    template: `
      <button (click)="clicked()">Toggle</button>
      <div>
        <div *ngIf="show">
          <h2>Hello World!</h2>
        </div>
      </div>
    `
})
class App {
    show: boolean = true;

    constructor() {
        Socket.on {
            If (getMessage) {
                this.show = !this.show;
            }
        }
    }

    clicked() {
        this.show = !this.show;
    }
}

bootstrap(App);

Answer 1

我认为这是与区域相关的问题。后者负责通知 Angular 它需要处理更新。

这个问题可以给你一些提示:View is not updated on change in Angular2 .

你可以尝试这样的事情:

export class App {
  constructor(ngZone:NgZone) {
    this.ngZone = ngZone;
    Socket.on {
      this.ngZone.run(() =>
        If (getMessage) {
            this.show = !this.show;
        }
      });
    }
  }

  }

这个问题也可能与您的问题有关:Angular2 child property change not firing update on bound property .

希望对你有帮助， 蒂埃里