从组件中的异步服务检索数据 [英] Retrieve data from an asynchronous service in a component

问题描述

我通过服务的功能从Firebase异步检索数据，我想在我的组件中检索它们.

I retrieve my data from Firebase in a function of my service asynchronously and I would like to retrieve them in my component.

我的数据库中有数据，该函数可以很好地返回我的数据，但是我无法在home.ts(数组为空)中检索它们.

I have data in my database, the function returns my data well but I can not retrieve them in my home.ts (array empty).

todolistService.ts:

todolistService.ts :

    import {Injectable} from '@angular/core';
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
import * as moment from 'moment';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs/Observable";

@Injectable()
export class TodolistService {

  statuts: Array<any> = [];
  dateOfTheDay: string;

  constructor(public afDB: AngularFireDatabase) {
    moment.locale('fr');
    this.dateOfTheDay = moment().format('L'); // Date au format : 04/07/2017
  }

  /**
   *
   * @returns {Observable<Array<any>>}
   */
  statusToShow():Observable<Array<any>> {
    let localStatuts: Array<any> = [];
    return this.afDB.list('/statut').map(status => {
      for (let s of status) {
        if (this.dateOfTheDay === s.statut_date_tache) {
          if (s.statut_id_tache in this.statuts === false) {
            localStatuts[s.statut_id_tache] = s;
            console.log('=== STATUSTOSHOW ===');
            console.log(localStatuts);
            return localStatuts;
          }
        }
      }
    });
  }
}

home.ts:

    import {Component} from '@angular/core';
import {ModalController, NavController} from 'ionic-angular';
import {TodolistService} from "../../providers/todolistService";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public statusOfTheDay: Array<any> = [];

  constructor(public navCtrl: NavController, public modalCtrl: ModalController, public todolistService: TodolistService) {

  }

  ionViewDidLoad() {
    this.todolistService.statusToShow().subscribe(status => this.statusOfTheDay = status);
    console.log('=== HOME ===');
    console.log(this.statusOfTheDay);
  }
}

我不知道我的问题来自哪里.."=== HOME ===首先出现在控制台中是否正常?

I do not know where my problem comes from .. Is it normal that the "=== HOME ===" first appears in the console ?

在此先感谢您的帮助，并感谢@ AJT_82.

Thank you in advance for your help and thank you to @AJT_82.

推荐答案

我认为这是因为您没有从 .map 返回任何内容.您也可以使用filter语句使之更简单.

I think it is because you are not returning anything from your .map. You could also make it simpler with a filter statement.

return this.afDB.list('/statut').map(status => {
  return status.filter(s => this.dateOfTheDay === s.statut_date_tache && (s.statut_id_tache in this.statuts === false));
});

如果您仍要注销所选择的状态，则可以使用

If you still want to log out the status as it is selected you could use

return this.afDB.list('/statut').map(status => {
  return status.filter(s => {
    if (this.dateOfTheDay === s.statut_date_tache && (s.statut_id_tache in this.statuts === false))) {
      console.log (s);
      return true;
    }
    return false;
  }
});

您还需要等待 subscribe 完成后才能登录

You also need to wait for the subscribe to finish before logging

ionViewDidLoad() {
  this.todolistService.statusToShow().subscribe(status => {
    this.statusOfTheDay = status;
    console.log('=== HOME ===');
    console.log(this.statusOfTheDay);
  });
}

这篇关于从组件中的异步服务检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！