我的应用程序仅显示一项检索到的数据答案

【问题标题】：My app only shows one item of retrieved data我的应用程序仅显示一项检索到的数据
【发布时间】：2016-03-17 14:42:43
【问题描述】：

我正在使用 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 link的plnkr

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

【问题讨论】：

标签： javascript firebase angular

【解决方案1】：

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

为了防止这种情况，您可以将 publicio 变量从 observable 外部化。这样，您将看到依次收到的三个元素：

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

【讨论】：

嗨@thierry 很抱歉给您带来了麻烦，但是我如何在没有推送方法的情况下发送所有数据？当我在我的数据中添加一些东西时，使用 push 方法，当我只想更新这个数据时，它会调用另一个 push 方法。所以它在视图中创建了 2 个相同的数据。我该如何管理？

【解决方案2】：

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

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

【讨论】：