数据更改时 Angular View 不更新

Question

我正在使用 NativeScript 和使用 Firebase 插件的 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');
}

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

Answer 1

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

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