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

Question

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

假设我有以下几点：

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

Answer 1

你的数据是可观察到的和异步呈现。

要修改它，你可以使用一个管道：

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