AngularFire2更新列表项触发列表更改
我对firebase的更新调用正在工作,但它似乎刷新了我循环的列表,导致我的输入失去焦点 我是否可以在没有原始列表的情况下启动更新以刷新或只是捕获此信息?我将为每个对象添加更多要更改的字段 组件技术AngularFire2更新列表项触发列表更改,angular,firebase,firebase-realtime-database,angularfire2,Angular,Firebase,Firebase Realtime Database,Angularfire2,我对firebase的更新调用正在工作,但它似乎刷新了我循环的列表,导致我的输入失去焦点 我是否可以在没有原始列表的情况下启动更新以刷新或只是捕获此信息?我将为每个对象添加更多要更改的字段 组件技术 quiz_ref: AngularFireList<any>; quiz_items : Observable<any[]>; constructor(afs: AngularFireDatabase){ this.quiz_ref = afs.lis
quiz_ref: AngularFireList<any>;
quiz_items : Observable<any[]>;
constructor(afs: AngularFireDatabase){
this.quiz_ref = afs.list('quiz/questions', ref => ref.orderByChild('id'));
this.quiz_items = this.quiz_ref.snapshotChanges().map(changes => {
return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
});
}
updateItem(key: string, item) {
this.quiz_ref.update(key,item);
}
quick\u ref:AngularFireList;
测验项目:可观察;
构造器(afs:AngularFireDatabase){
this.quick_ref=afs.list('quick/questions',ref=>ref.orderByChild('id');
this.quick\u items=this.quick\u ref.snapshotChanges().map(更改=>{
返回changes.map(c=>({key:c.payload.key,…c.payload.val()}));
});
}
updateItem(键:字符串,项){
本测验参考更新(关键,项目);
}
component.html
<div class="row">
<div class="col-md-12" *ngFor="let item of quiz_items| async ">
<div class="col-md-10 offset-md-1">
<mat-expansion-panel [expanded]='true' >
<mat-expansion-panel-header>
<mat-panel-title>
{{item.id}}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="row">
<div class="col-md-12">
<mat-form-field>
<input matInput type="text" placeholder="Vraag NL"
[(ngModel)]="item.question_nl"
(ngModelChange)="updateItem(item.key,item)" >
</mat-form-field>
</div>
</div>
</mat-expansion-panel>
</div>
</div>
</div>
{{item.id}
研究在*ngFor中使用“跟踪方式”
HTML
工作起来很有魅力!谢谢
<div class="col-md-12" *ngFor="let item of quiz_items| async; trackBy: trackFn">
</div>
public trackFn(index, item) {
return item ? item.id : undefined;
}