数据更改时角度视图不更新

Question

我正在使用 Firebase 插件使用 NativeScript 和 Angular 开发聊天应用程序。我正在使用 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');
}

问题是当我从我的一端发送消息时，视图会更新，但是当有人从他们的一端发送消息时，消息数组会发生变化，但除非我重新启动应用程序，否则我看不到它。这可能是什么原因造成的。

Answer 1

当您侦听 firebase 事件侦听器时，它会在角度区域之外运行您的代码。所以基本上你需要为 NgZone 中的变量赋值。

在ChangeDetectionRef使用cd.detectChanges()成功反映更改的保证的帮助下，还强制运行 changeDetection 循环。但您可能不需要这样做。仅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');
        }
    }
}