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

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

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

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

firebase.addValueEventListener( (result) => {
  for(var key in result.value){
    this.posts.push(result.value[key].Message);
  }
  this.messages = this.posts;
  //am using this.messges to update the view
  this.posts=[];


  }, '/forum/messages');
}

Проблема в том, что когда я отправляю сообщение с моего конца, представление обновляется, но когда кто-то отправляет сообщение с его конца, массив сообщений изменяется, но я не вижу его, пока не перезапущу приложение. Что может быть причиной этого.

1 Ответ

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

когда вы слушаете прослушиватель событий firebase, он запускает ваш код за пределами угловой зоны. поэтому в основном вам нужно присвоить значения вашей переменной внутри NgZone.

Также принудительно запускает цикл changeDetection с помощью ChangeDetectionRef с использованием cd.detectChanges() гарантии того, что изменения успешно отражены. но вам может не понадобиться это делать. делать это только zone.run не работает в одиночку.

например 

import {
    NgZone,
    ChangeDetectorRef
} from "@angular/core";
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home-common.css", "./home.css"]
})
export class HomeComponent{
    messages=[];
    constructor(
        private cd: ChangeDetectorRef,
        private zone: NgZone
    ) {
        firebase.addValueEventListener( (result) => {


          for(var key in result.value){
            this.posts.push(result.value[key].Message);
          }
          this.zone.run(() => {
              this.messages = this.posts;
              this.cd.detectChanges();
          })

          //am using this.messges to update the view
          this.posts=[];


          }, '/forum/messages');
        }
    }
}
...