angular2火力实时更新不工作 [英] angular2 firebase realtime updating not working
本文介绍了angular2火力实时更新不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有简单的应用程序中插入新记录火力地堡和下方的输入字段它只是列出数据库近10项。
问题：
- 我要开始输入查询成才输入字段或更新从火力地堡数据点击出现在我的清单。它似乎由角的处理已被完成，导致它现在initialy显示列表之后数据用武之地。我尝试添加|异步来ngFor，但不能正常工作，导致在控制台的错误。一切工作不错，只是需要加载和显示数据的onload，没有我输入查询击键输入或点击更新按钮。
- 当我打开两个标签具有相同的应用程序，因为我认为他们会一旦我开始从一个标签到另一个输入查询数据曲折他们不更新实时的，我只是出现在我插入的数据的标签。
进口{组件，enableProdMode}从'angular2 /核心; enableProdMode（）;
进口{} FirebaseService从火力-angular2 /核心;
VAR myFirebaseRef =新的火力地堡（https://xxx.firebaseio.com/messages）;@零件（{
选择：我的应用，
模板：`
＆LT;输入类型=文本[（ngModel）] =newmsg#newmsgref（keyup.enter）=updateHello（newmsgref）＆GT;
＆LT;按钮（点击）=updateHello（newmsgref）＆GT;更新和LT; /按钮＆GT;
＆LT; UL＆GT;
＆LT;李* ngFor =项目＃项目＆GT;
{{项目}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
`
}）
出口类AppComponent {
newmsg：字符串;
项目：数组＆LT;串GT; = []; 构造函数（）{
myFirebaseRef.limitToLast（10）。在（'child_added'，（childSnapshot，prevChildKey）=＆GT; {
childSnapshot.forEach（（记录）=＆GT; {
this.items.push（records.val（））;
}）;
}）;
} updateHello（r）的{
myFirebaseRef.push（{
标题：this.newmsg
}）;
this.newmsg =;
r.focus（）;
}
}
解决方案＃1 NGZONE手动更新哪些保护正常工作（感谢：君特Zöchbauer）
由于定义是A2之外，使用NgZone是很容易并解决了问题。由于冈特;）
进口{组件，enableProdMode，NgZone}从'angular2 /核心; enableProdMode（）;
进口{} FirebaseService从火力-angular2 /核心;
VAR myFirebaseRef =新的火力地堡（https://xxx.firebaseio.com/messages）;@零件（{
选择：我的应用，
模板：`
＆LT;输入类型=文本[（ngModel）] =newmsg#newmsgref（keyup.enter）=updateHello（newmsgref）＆GT;
＆LT;按钮（点击）=updateHello（newmsgref）＆GT;更新和LT; /按钮＆GT;
＆LT; UL＆GT;
＆LT;李* ngFor =项目＃项目＆GT;
{{项目}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
`
}）
出口类AppComponent {
newmsg：字符串;
项目：数组＆LT;串GT; = []; 构造函数（私人区：NgZone）{
myFirebaseRef.limitToLast（10）。在（'child_added'，（childSnapshot，prevChildKey）=＆GT; {
zone.run（（）=＆GT; {
childSnapshot.forEach（（记录）=＆GT; {
this.items.push（records.val（））;
}）;
}）;
}）;
} updateHello（r）的{
myFirebaseRef.push（{
标题：this.newmsg
}）;
this.newmsg =;
r.focus（）;
}
}
解决方案＃2自动A2 UPDATING 哪些保护正常工作（感谢：蒂埃里）
我简单地把定义类angular2的，不在外面里面，一切都开始工作，我认为initialy。感谢您对蒂埃里·洞察力;）
进口{组件，enableProdMode}从'angular2 /核心; enableProdMode（）;
进口{} FirebaseService从火力-angular2 /核心;@零件（{
选择：我的应用，
模板：`
＆LT;输入类型=文本[（ngModel）] =newmsg#newmsgref（keyup.enter）=updateHello（newmsgref）＆GT;
＆LT;按钮（点击）=updateHello（newmsgref）＆GT;更新和LT; /按钮＆GT;
＆LT; UL＆GT;
＆LT;李* ngFor =项目＃项目＆GT;
{{项目}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
`
}）
出口类AppComponent {
newmsg：字符串;
项目：数组＆LT;串GT; = [];
myFirebaseRef =新的火力地堡（https://xxx.firebaseio.com/messages）; 构造函数（）{
this.myFirebaseRef.limitToLast（10）。在（'child_added'，（childSnapshot，prevChildKey）=＆GT; {
childSnapshot.forEach（（记录）=＆GT; {
this.items.push（records.val（））;
}）;
}）;
} updateHello（r）的{
this.myFirebaseRef.push（{
标题：this.newmsg
}）;
this.newmsg =;
r.focus（）;
}
}
解决方案
构造（私有区：NgZone）...
zone.run（（）=＆GT; {
childSnapshot.forEach（（记录）=＆GT; {
this.items.push（records.val（））;
}）;
}）;
...
又见<一个href=\"http://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually\">Triggering Angular2变化检测手动
I have simple app that inserts new record to Firebase and below the input field it simply lists last 10 items in database.
PROBLEM:
- I need to start inputing someting to input field or to click on "update" for data from Firebase to appear in my listing. It seems that data comes in after the processing by angular has been already done, causing it now to show the list initialy. I tried adding "| async" to ngFor, but does not work and causes errors in console. Everything is working good, just need to load and show the data onload, without me inputing a keystroke in input or clicking to update button.
- when I open two tabs with same app, they do not update realtime as I supposed they would once I start inputing data zig-zag from one tab to another, I only appears in the tab in which I inserted the data.
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();
}
}
SOLUTION #1 WITH NGZONE MANUAL UPDATE WHICH WORKED (thanks to: Günter Zöchbauer) Since the definition was outside the A2, the use of NgZone is really easy and corrected the problem. Thanks 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();
}
}
SOLUTION #2 AUTOMATIC A2 UPDATING WHICH WORKED (thanks to: Thierry) I simply put the definition inside the class of angular2, not outside, and everything started working as I assumed initialy. Thank you Thierry for the insight ;).
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();
}
}
解决方案
constructor(private zone: NgZone)
...
zone.run(() => {
childSnapshot.forEach((records) => {
this.items.push(records.val());
});
});
...
See also Triggering Angular2 change detection manually
这篇关于angular2火力实时更新不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
