Angular 2中的*ngIf问题(TypeScript)

Question

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

当我单击"切换"按钮时,它可以成功显示/隐藏文本"Hello World!".

当我使用套接字从另一个浏览器发送命令时,布尔"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

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

这个问题可以给你一些提示:视图没有更新Angular2中的更改.

你可以尝试这样的事情:

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

  }

此问题也可能与您的问题有关:Angular2子属性更改未在绑定属性上触发更新.

希望它对你有帮助,蒂埃里

Answer 2

似乎Socket代码在Angulars区域外运行.注入NgZone并使用zone.run(...)Angular以使Angular意识到必要的变化检测.

class App {
  show: boolean = true;

  constructor(zone: NgZone) {
    Socket.on {
        if (getMessage) {
            zone.run(() => { this.show = !this.show; });
        }
    }
  }


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