Angular，回调函数不改变变量

Question

Angular，回调函数不改变变量

angulartypescriptfirebasefirebase-realtime-database

4

我有以下的代码片段

这是我的main.html

<h2 class="txtcenter po-2text" style="padding-top:30px">
    {{title}}
</h2>

这是我的main.ts文件：

title: string;

ngOnInit() {
    var self = this;
    var ref = firebase.database().ref('schools/' + this.currentUserId());
    ref.orderByChild('title').on('value', function(dataSnapshot) {
        console.log("Title is: " + dataSnapshot.val().title);
        self.title = dataSnapshot.val().title;
    });
}

尽管回调函数触发时带有一些有效的数据，但标题并不会自动更新。我错过了什么吗？

感谢任何帮助！

- Luigi Capogrosso

请问您可以创建一个这个的工作示例吗？如果可能，您可以尝试创建一个 StackBlitz。同时，请尝试使用 fat-arrow 函数语法进行语法更改，并检查是否有帮助。请尝试像这样更改您的 ngOnInit：

ngOnInit() {
  const ref = firebase.database().ref('schools/' + this.currentUserId());
  ref.orderByChild('title').on('value', dataSnapshot => this.title = dataSnapshot.val().title);
}

- SiddAjmera

@LuigiCapgrosso，所以 console.log 没有问题吗？ - Andrei Tătar

你可能想要查看 https://github.com/angular/angularfire2 - Andrei Tătar

是的，console.log 运行良好。 - Luigi Capogrosso

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anto Antony · Accepted Answer

Angular的变化检测是基于浏览器事件的，由于这是一个Firebase事件回调，它不会触发变化检测。因此，请尝试以下操作：

导入NgZone：

import { Component, NgZone } from '@angular/core';

将其添加到您的类构造函数中

constructor(public zone: NgZone, ...args){}

使用zone.run运行代码:

ref.orderByChild('title').on('value', (dataSnapshot) => {
        console.log("Title is: " + dataSnapshot.val().title);
        this.zone.run(() => this.title = dataSnapshot.val().title;)
});