麻烦* ngIf在2角（打字稿） [英] Trouble with *ngIf in Angular 2 (TypeScript)

问题描述

我使用的角度2β（打字稿）。我遇到了一个奇怪的问题。我试过的Chrome，Firefox，歌剧，所有相同的结果。

当我点击切换按钮，就可以成功地显示/隐藏文本Hello World！

当我使用插座，布尔秀的变化背景下成功从其他浏览器发送命令，但是，文本不显示/隐藏，它看起来像网页不刷新。

 进口{组件，查看}从'angular2 /核心;
从angular2 /引导进口{}引导;
进口{} NgIf从'angular2 /通用';@零件（{
    选择：应用程序
}）
@视图（{
    指令：[NgIf]
    模板：`
      ＆LT;按钮（点击）=点击（）＆GT;＆切换LT; /按钮＆GT;
      ＆LT; D​​IV＆GT;
        ＆LT; D​​IV * ngIf =秀＆GT;
          ＆LT; H2＆GT;的Hello World＆LT;！/ H＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
    `
}）
类应用{
    显示：布尔= TRUE;    构造函数（）{
        Socket.on {
            如果（的getMessage）{
                this.show = this.show！;
            }
        }
    }    点击（）{
        this.show = this.show！;
    }
}引导（APP）;
 

解决方案

我认为这是关系到园区的一个问题。后者负责通知角，它需要处理的更新

这个问题可以给你一些提示：不更新上查看改变Angular2 。

您可以尝试这样的事情：

 出口类应用{
  构造函数（ngZone：NgZone）{
    this.ngZone = ngZone;
    Socket.on {
      this.ngZone.run（（）=＆GT;
        如果（的getMessage）{
            this.show = this.show！;
        }
      }）;
    }
  }  }
 

这个问题可以也关系到你的问题：<一href=\"http://stackoverflow.com/questions/34761224/angular2-child-property-change-not-firing-update-on-bound-property/\">Angular2子属性的变化不是绑定属性射击更新。

希望它可以帮助你，
蒂埃里

I am using Angular 2 beta (TypeScript). I met a weird problem. I tried Chrome, Firefox, Opera, all same results.

When I click the "Toggle" button, it can successfully show/hide the text "Hello World!".

When I send the command from another browser using socket, the boolean "show" changes successfully background, however, the text does not show/hide, which looks like the page does not refresh.

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

解决方案

I think that it's a problem related to Zone. The latter is responsible to notify Angular that it needs to handle an update.

This question could give you some hints: View is not updated on change in Angular2.

You could try something like that:

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

  }

This question could be also related to your problem: Angular2 child property change not firing update on bound property.

Hope it helps you, Thierry

这篇关于麻烦* ngIf在2角（打字稿）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！