Question

我正在使用firebase和angular2构建一个小应用程序。事情进展顺利，但现在我面临一个小问题。当我检索数据时，在控制台中我拥有所有数据（3个对象）。但应用程序只显示其中一个（数据库中的最后一个）。

但它似乎不是同一个问题

我正在以这种方式撤回数据：

  loadTask(){
  return Observable.create((observer) => {
    this.geoQuery.on("key_entered", function(key, location, distance){
        this.usersRef = new Firebase('https://FBRUL.firebaseio.com/users/');
        this.publicationRef = new Firebase('https://FBRUL.firebaseio.com/task/');
        this.publicationRef.orderByKey().equalTo(key).on("child_added", (snapshot) =>{
          this.publications = snapshot.key();
          this.publicationRef.child(this.publications).on("child_added", snapshot => {
            this.__publi = snapshot.val();
            this.__key = snapshot.key();
            let publicio = [];
            this.publicationnass = {nom: this.__publi.nom, skills: this.__publi.skills, bugdet: this.__publi.budget, distance: Math.floor(distance), date: this.__publi.date, location: this.__publi.location, attribue: this.__publi.attribue, id1:this.publications, id: this.__key, offres: this.__publi.offres, user: this.__publi.user }
            publicio.push(this.publicationnass)
            observer.next(publicio)
          })
        })

    })
  })
} 
}

这是我的案例plunker link

的plnkr

如您所见，数据全部在控制台中，但只显示一个。任何人都可以帮我这个吗？

Answer 1

实际上，您向观察者提供了一个包含一个元素三次的数组。这就是为什么observable received和ngFor只显示一个元素：

为了防止这种情况，您可以从可观察对象中外化publicio变量。这样，您将看到连续收到的三个元素：

loadTask(){
  let publicio = []; // <-----
  return Observable.create((observer) => {
    this.geoQuery.on("key_entered", function(key, location, distance){
      this.usersRef = new Firebase('https://FBRUL.firebaseio.com/users/');
      this.publicationRef = new Firebase('https://FBRUL.firebaseio.com/task/');
      this.publicationRef.orderByKey().equalTo(key).on("child_added", (snapshot) =>{
        this.publications = snapshot.key();
        this.publicationRef.child(this.publications).on("child_added", snapshot => {
          this.__publi = snapshot.val();
          this.__key = snapshot.key();
          //let publicio = []; // <------
          this.publicationnass = {nom: this.__publi.nom, skills: this.__publi.skills, bugdet: this.__publi.budget, distance: Math.floor(distance), date: this.__publi.date, location: this.__publi.location, attribue: this.__publi.attribue, id1:this.publications, id: this.__key, offres: this.__publi.offres, user: this.__publi.user }
          publicio.push(this.publicationnass)
          observer.next(publicio)
        })
      })
    })
  })
}

Answer 2

另一种方法，除了蒂埃里的回答。您可以一次发送一个元素作为对象而不是数组。然后，在您的App组件上，您只需将它们推送到posts数组。

Your Plunker fixed

return Observable.create((observer) => {
    this.geoQuery.on("key_entered", function(key, location, distance){
        this.usersRef = new Firebase('https://jobandgo.firebaseio.com/users/');
        this.publicationRef = new Firebase('https://jobandgo.firebaseio.com/task/');
        this.publicationRef.orderByKey().equalTo(key).on("child_added", (snapshot) =>{
          this.publications = snapshot.key();
          this.publicationRef.child(this.publications).on("child_added", snapshot => {
            this.__publi = snapshot.val();
            this.__key = snapshot.key();
            // let publicio = []; 
            // I changed the below line from this.publicationnass = to let publicationnass because you dont need publicationnass to be on the class level
            let publicationnass = {nom: this.__publi.nom, skills: this.__publi.skills, bugdet: this.__publi.budget, distance: Math.floor(distance), date: this.__publi.date, location: this.__publi.location, attribue: this.__publi.attribue, id1:this.publications, id: this.__key, offres: this.__publi.offres, user: this.__publi.user }
            // no need for the line below
            // publicio.push(publicationnass)
            observer.next(publicationnass) 
          })
        })
    })
  })

然后，在您的应用组件上：

constructor(public Dataservice: Dataservice) {
  this.Dataservice.loadTask().subscribe((res) => {
    this.posts.push(res)
    console.log(this.posts)
  })
}

app只显示一个检索到的数据

2 个答案: