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

}

或者订阅observable并自己做异步部分：

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

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

1 个答案: