Угловой, обратный вызов не меняет переменную

Question

У меня есть следующий фрагмент

Это мой 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;
    });
}

Несмотря на то, что обратный вызов запускается с некоторыми действительными данными, заголовок не обновляется автоматически.Чего мне не хватает?

Любая помощь приветствуется!

Answer 1

Обнаружение угловых изменений работает на основе событий браузера, так как это обратный вызов базового события, который не вызовет обнаружение изменений.Попробуйте следующее:

Import 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;)
});