AngularFire2リスト項目の更新リストの変更

Question

firebaseへの私の更新の呼び出しは機能していますが、ループしているリストをリフレッシュして、入力がフォーカスを失う原因となります。

どのようにしても、元のリストを更新しなくても更新できます。変更するオブジェクトごとにフィールドを追加します。

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

は* ngForで 'でトラック' を使用して調べてください。魔法のように

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