我的应用仅显示一项检索到的数据

My app only shows one item of retrieved data

本文关键字：检索 一项 数据 应用 显示 我的      更新时间：2023-09-26

我正在使用Firebase和Angular 2构建一个小应用程序。

事情进展顺利，但现在我面临着一个小问题。当我检索数据时，我在控制台中拥有所有数据（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 链接的 PLNKR

如您所见，数据都在控制台中，但只显示一个。谁能帮我解决这个问题？

事实上，你向观察者提供了一个包含三次元素的数组。这就是为什么可观察量接收和 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)
        })
      })
    })
  })
}

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

您的普伦克已修复

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)
  })
}
相关文章：