java - Angular 火 : How to perform some operations on data before updating template

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>

我的自定义管道:

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