问题:
>我需要开始输入某些输入字段或点击“更新”以获取Firebase中的数据以显示在我的列表中.看来,在处理完角度后数据已经完成,现在它已经初始化地显示了列表.我尝试将“| async”添加到ngFor,但不起作用并导致控制台出错.一切都运行良好,只需要加载并显示数据onload,而无需在输入中输入击键或单击更新按钮.
>当我用相同的应用程序打开两个选项卡时,它们不会实时更新,因为我认为一旦我开始从一个选项卡到另一个选项卡输入数据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',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',prevChildKey) => { childSnapshot.forEach((records) => { this.items.push(records.val()); }); }); } updateHello(r){ this.myFirebaseRef.push({ title: this.newmsg }); this.newmsg=""; r.focus(); } }
constructor(private zone: NgZone) ... zone.run(() => { childSnapshot.forEach((records) => { this.items.push(records.val()); }); }); ...