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

使用＆＃39;跟踪＆＃39;在* 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;
}

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

1 个答案: