java - Angularfire:如何在更新模板之前对数据执行一些操作

我试图在将某些数据附加到模板之前对其进行修改。

假设我有以下内容：

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css'],
  template: `
  <section>
    <article *ngFor="let item of items | async">
       {{ item | json }}
    </article>
  </section>
  `,
})

export class ContactComponent {
  items: FirebaseListObservable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('items');
  }
}

在将每个项目附加到模板之前，我该如何处理。

在Java中，这类似于：

ref.addValueEventListener(new ValueEventListener() {
    @Override
    public void onDataChange(DataSnapshot d) {
       //here
       ref.child(d.key).addValueEventListener(new ValueEventListener() {

          @Override
          public void onDataChange(DataSnapshot dataSnapshot) {
              //then update template from here.
          }

          @Override
          public void onCancelled(DatabaseError databaseError) {}
       });
    }

    @Override
    public void onCancelled(DatabaseError databaseError) {}
});

最佳答案

您的数据是可观察的，并且是异步呈现的。

要对其进行修改，可以使用管道：

<article *ngFor="let item of items | async | myCustomPipe"><article>

myCustomPipe：

export class MyCustomPipe implements PipeTransform {

  transform(items: any[], args?: any): any {
    //do your modifications here
    return items;
  }

}

或订阅可观察者并自己做异步部分：

public items: any[];

constructor(db: AngularFireDatabase) {
  db.list('items').subscribe(items => this.items = this.modifyItems(items));
}

private modifyItems(items: any[]){
  //do your modifications here
  return items;
}