angular2 firebase实时更新无法正常工作

Question

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

问题:

1. 我需要开始输入某些输入字段或点击"更新"以获取Firebase中的数据以显示在我的列表中.看来,在处理完角度后数据已经完成,现在它已经初始化地显示了列表.我尝试将"| async"添加到ngFor,但不起作用并导致控制台出错.一切都运行良好,只需要加载并显示数据onload,而无需在输入中输入击键或单击更新按钮.
2. 当我用相同的应用程序打开两个选项卡时,它们不会实时更新,因为我认为一旦我开始从一个选项卡到另一个选项卡输入数据zig-zag,我只会出现在我插入数据的选项卡中.

---

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

解决方案#1与NGZONE手动更新工作(感谢:GünterZö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());
  });
});
...

另请参阅手动触发Angular2更改检测

Answer 2

Günter正是指出了问题；-)实际上，它myFirebaseRef是在Angular2处理之外创建的。

如果您对Firebase的自定义管道感兴趣，可以查看Angular Connect 2015上Sarah Robinson演讲的来源：

• https://github.com/sararob/angular2base/blob/master/src/firebasepipe.ts

希望对您有帮助，蒂埃里