Угловое представление не получает обновления при изменении переменных - PullRequest
Новая
       10

Угловое представление не получает обновления при изменении переменных

0 голосов
/ 28 мая 2018

Я работаю с Angular 5. В @Output() EventEmitter, когда я получаю некоторую переменную, в функции привязки, хотя я могу изменить значение и утешить, оно не отражается в представленииside.

Ниже приведен код того, что я описал выше: 

{{ visible }} <!-- visible remains "true" before and after emit -->

<app-my-component (objChange)="onChange($event)"></app-my-component>

onChange(obj) {
  this.var = obj.var;
  this.visible = false;
  console.log(this.visible); // which logs "false" correctly.
}

Я запустил свой эмиттер в приемнике событий маркера Google Maps: 

marker.addListener('click', () => {
    this.objChange.emit(obj);
});

Я работаю с Angular 4+ довольно давно (почти год), а такого раньше не было.На этот раз могут быть разные (но я не знаю, может ли быть причиной любой из них):

  1. EventEmitter каким-то образом вызывается API Карт Google (импортируется с @types/googlemaps)
  2. Я обновил свой @angular/cli до версии 6 на прошлой неделе (пока проект остается версией 5)

Что кажется мне более странным, эта проблема возникает только тогда, когда я запускаю свой проектна этой странице.(То есть, если я перехожу на другую страницу, а затем возвращаюсь, это работает.) Перезапустите ng serve или попробуйте использовать rxjs, но оба не удаются для меня.Если кто-нибудь когда-либо сталкивался с той же проблемой, не могли бы вы рассказать, как вы это исправили?Спасибо!

1 Ответ

0 голосов
/ 28 мая 2018

Скорее всего, проблема в том, что вы используете Google Maps и какую-то асинхронную функцию, и при обратном вызове вы запускаете this.objChange.emit().

Это приведет к тому, что Angular не будет знать, что вы простосделал, и в результате он не вызовет обнаружение изменений.

Простое решение - импортировать NgZone и обернуть излучение @Output в его функцию run: 

constructor(private ngZone: NgZone) {}

someAsyncGoogleFunction
  .then(() => {

    this.ngZone.run(() => {
      this.objChange.emit();
    });
  })
...