firebase - angular2 firebase 实时更新不起作用

Question

我有一个简单的应用程序，它向 Firebase 插入新记录，并在输入字段下方列出数据库中的最后 10 个项目。

问题:

1. 我需要开始在输入字段中输入一些内容，或者单击“更新”以使来自 Firebase 的数据显示在我的列表中。似乎数据是在 Angular 处理完成后才进来的，导致它现在显示列表初始值。我尝试将“| async”添加到 ngFor，但不起作用并导致控制台出错。一切正常，只需要加载并显示加载的数据，无需我在输入中输入击键或单击更新按钮。
2. 当我使用同一个应用程序打开两个选项卡时，它们不会像我想象的那样实时更新，一旦我开始从一个选项卡到另一个选项卡输入锯齿形数据，我只会出现在我插入数据的选项卡中。

---

import {Component,enableProdMode} from 'angular2/core'; enableProdMode();
import {FirebaseService} from 'firebase-angular2/core';
var myFirebaseRef = new Firebase("https://xxx.firebaseio.com/messages");

@Component({
    selector: 'my-app',
    template: `
        <input type=text [(ngModel)]="newmsg" #newmsgref (keyup.enter)="updateHello(newmsgref)">
        <button (click)="updateHello(newmsgref)">Update</button>
        <ul>
            <li *ngFor="#item of items">
              {{item}}
            </li>
        </ul>
    `
})
export class AppComponent {
    newmsg:string;
    items:Array<string>=[];

    constructor() {
        myFirebaseRef.limitToLast(10).on('child_added', (childSnapshot, prevChildKey) => {
            childSnapshot.forEach((records) => {
              this.items.push(records.val());
            });
        });
    }

    updateHello(r){
        myFirebaseRef.push({
            title: this.newmsg
        });
        this.newmsg="";
        r.focus();
    }
}

使用 NGZONE 手动更新的解决方案 #1 有效(感谢:Günter Zöchbauer) 由于定义在 A2 之外，因此使用 NgZone 非常容易并解决了问题。谢谢 Günter ;)

import {Component,enableProdMode,NgZone} from 'angular2/core'; enableProdMode();
import {FirebaseService} from 'firebase-angular2/core';
var myFirebaseRef = new Firebase("https://xxx.firebaseio.com/messages");

@Component({
    selector: 'my-app',
    template: `
        <input type=text [(ngModel)]="newmsg" #newmsgref (keyup.enter)="updateHello(newmsgref)">
        <button (click)="updateHello(newmsgref)">Update</button>
        <ul>
            <li *ngFor="#item of items">
              {{item}}
            </li>
        </ul> 
    `
})
export class AppComponent {
    newmsg:string;
    items:Array<string>=[];

    constructor(private zone: NgZone) {
        myFirebaseRef.limitToLast(10).on('child_added', (childSnapshot, prevChildKey) => {
            zone.run(() => {
                childSnapshot.forEach((records) => {
                    this.items.push(records.val());
                });
            });
        });
    }

    updateHello(r){
        myFirebaseRef.push({
            title: this.newmsg
        });
        this.newmsg="";
        r.focus();
    }
}

解决方案 #2 自动 A2 更新 有效(感谢:Thierry) 我只是将定义放在 angular2 的类中，而不是放在外面，然后一切都按照我假设的初始状态开始工作。感谢 Thierry 的见解；)。

import {Component,enableProdMode} from 'angular2/core'; enableProdMode();
import {FirebaseService} from 'firebase-angular2/core';

@Component({
    selector: 'my-app',
    template: `
        <input type=text [(ngModel)]="newmsg" #newmsgref (keyup.enter)="updateHello(newmsgref)">
        <button (click)="updateHello(newmsgref)">Update</button>
        <ul>
            <li *ngFor="#item of items">
              {{item}}
            </li>
        </ul>
    `
})
export class AppComponent {
    newmsg:string;
    items:Array<string>=[];
    myFirebaseRef = new Firebase("https://xxx.firebaseio.com/messages");

    constructor() {
        this.myFirebaseRef.limitToLast(10).on('child_added', (childSnapshot, prevChildKey) => {
            childSnapshot.forEach((records) => {
                this.items.push(records.val());
            });
        });
    }

    updateHello(r){
        this.myFirebaseRef.push({
            title: this.newmsg
        });
        this.newmsg="";
        r.focus();
    }
}

Answer 1

constructor(private zone: NgZone)

...
zone.run(() => {
  childSnapshot.forEach((records) => {
    this.items.push(records.val());
  });
});
...

另见 Triggering Angular2 change detection manually