Question

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

当我点击＆＃34;切换＆＃34;按钮，它可以成功显示/隐藏文本＆＃34; Hello World！＆＃34;。

当我使用套接字从另一个浏览器发送命令时，布尔值＆＃34;显示＆＃34;但是，成功更改背景，文本不显示/隐藏，看起来页面不刷新。

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它需要处理更新。

这个问题可以给你一些提示：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。

希望它可以帮到你，亨利

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;
  }
}

Angular 2（TypeScript）中{ngIf}的问题

2 个答案: