приложение показывает только одно извлеченное данные

Question

Я создаю небольшое приложение, используя firebase и angular2. Все идет хорошо, но теперь я столкнулся с небольшой проблемой. Когда я извлекаю данные, на консоли у меня есть все мои данные (3 объекта). Но приложение показывает только одно из них (последнее в базе данных).

Я уже посмотрел на это stackoverflow question.

Но его, кажется, не та же самая проблема

Я retreving данных таким способом:

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

    }) 
    }) 
} 
} 

и это plnkr моего дела plunker link

Как вы можете видеть все данные находятся в консоли, но отображается только один. Кто-нибудь может мне с этим помочь?

Answer 1

Фактически вы предоставляете наблюдателю массив с одним элементом три раза. Поэтому наблюдаемый полученный и 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, вы просто подталкиваете их к массиву сообщений.

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