использовать данные вне .subscribe в машинописном файле

Question

Я очень новичок в машинописи / ионе 4. Я пытаюсь получить доступ к данным, хранящимся в firebase, и использовать их в своем файле машинописи. когда в .subscribe я могу отображать данные в соответствии с запросом. но это не то, что я ищу. Мне нужно выполнить расчет за пределами .subscribe на моей странице .ts.

Я видел много похожих проблем, но, похоже, не могу найти решение.

Вот мой Машинопись Файл служб

  export interface Place{
    title: string;
    type: string;
    latitude: number;
    longitude: number;
 }
 export class PlaceService {
 placess: Place[];
 place: Place;
 private placesCollection: AngularFirestoreCollection<Place>;
 private places: Observable<Place[]>;

 constructor(db: AngularFirestore) {
    this.placesCollection = db.collection<Place>('places');

    this.places = this.placesCollection.snapshotChanges().pipe(
    map(actions =>{
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return{ id, ...data};
      });
    })
  );
 }
 getPlaces() {
    return this.places;
 }
 }

и соответствующая часть на моей странице машинопись

import { PlaceService, Place } from '../services/place.service';

places: Place[];
ngOnInit() {
this.placeService.getPlaces()
  .subscribe(res =>{
  this.places = res;
  console.log(this.places[0].title);//WORKS
});

console.log(this.places[0].title);//FAILED
 }

Я получаю следующее сообщение об ошибке:

 MapPage_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property '0' of undefined

Answer 1

Ваша проблема в том, что ваш код работает так, как вы его написали.Когда страница инициализируется, вызывается ngOnInit.Внутри код переходит к первому элементу (this.placeService.getPlaces () ...) и сразу переходит ко второму элементу (console.log (this.places [0]). Это выдает ошибку, потому что placesпеременная еще не установлена ​​из вашего вызова к серверу placeService и в настоящее время undefined.

ngOnInit() {
  this.placeService.getPlaces() // called first
    .subscribe(res =>{
    this.places = res;
    console.log(this.places[0].title);
});

console.log(this.places[0].title); // called second (undefined error)
}

Если вы вызовете функцию после установки переменной places, будет работать вторая console.log ().

ngOnInit() {
  this.placeService.getPlaces()
    .subscribe(res =>{
    this.places = res;
    console.log(this.places[0].title);
    this.showFirstTitle(); // this.places is set
  });
}

showFirstTitle() {
  console.log(this.places[0].title); // will work
}

Answer 2

.subscribe метод должен быть завершен (ajax-запрос должен быть 200-OK), внутри метода подписки вы можете сохранить ваши локальные переменные, тогда возможны дальнейшие модификации.

вы не можете использовать переменную, котораяне имеет данных.

this.placeService.getPlaces()
  .subscribe(res =>{
  this.places = res;  
});

потребуется несколько секунд для завершения вызова ajax и извлечения ответа и сохранения в «Places».

обходной путь (не рекомендуется), используйте set timeout function wait дляне менее 2 секувеличивайте секунды до тех пор, пока вы не найдете минимальные секунды для выполнения запроса и ответа.

, затем вы можете выполнить некоторые вычисления для this.places.