AngularFire2更新列表项触发列表更改

Question

我对 firebase 的更新调用正在运行，但它似乎刷新了我循环的列表，导致我的输入失去焦点。

有什么方法可以在没有原始列表的情况下触发更新或只是为了捕捉这个？我将为每个对象添加更多字段以进行更改。

组件.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 中使用“track by”。

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