AngularFire2 업데이트 목록 항목이 목록 변경을 트리거합니다.

Question

firebase에 대한 내 업데이트 호출이 작동하지만 루프가 반복되는 목록을 새로 고쳐 내 입력이 포커스를 잃게 만듭니다.

원본 목록을 새로 고치지 않고 업데이트하거나 그냥 잡을 수는 있습니다. 변경할 개체 당 필드를 더 추가 할 것입니다. * ngFor에 '에 의해 트랙을'사용에

component.ts

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

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> 

Answer 1

봐. 마법처럼

HTML

<div class="col-md-12" *ngFor="let item of quiz_items| async; trackBy: trackFn"> 

</div> 

TS

public trackFn(index, item) { 
    return item ? item.id : undefined; 
}