Angular 2 (TypeScript) içinde *ngIf ile sorun

Angular 2 beta (TypeScript) kullanıyorum. Garip bir sorunla karşılaştım. Chrome, Firefox, Opera denedim, hepsinde aynı sonuç.

“Toggle” düğmesine tıkladığımda, “Hello World!” metnini başarıyla gösterip/gizleyebilir.

Başka bir tarayıcıdan soket kullanarak komut gönderdiğimde, boolean "show" arka planı başarıyla değiştiriyor, ancak metin gösterilmiyor/gizlenmiyor, bu da sayfanın yenilenmemiş gibi görünmesine neden oluyor.

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

Cevap #1

Bence bu, Zone ile ilgili bir sorun. İkincisi, Angular'a bir güncellemeyi ele alması gerektiğini bildirmekten sorumludur.

Bu soru size bazı ipuçları verebilir: Angular2'de değişiklik olduğunda görünüm güncellenmez.

Böyle bir şey deneyebilirsin:

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

  }

Bu soru ayrıca sizin probleminizle de ilgili olabilir: Angular2 çocuk özelliği değişikliğinin bağlı özelliği güncellememesi.

Umarım işe yarar, Thierry

Cevap #2

Görünüşe göre Socket kodu Angular'ın alanının dışında çalışıyor. NgZone'u enjekte edin ve Angular'ın gerekli değişiklik tespitinden haberdar olması için zone.run(...) kullanın.

class App {
  show: boolean = true;

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


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

İlgili makaleler