Как хранить значения из наблюдаемой в переменной или свойстве

Question

Я работал над проектом с использованием angular и firebase / firestore.

У меня есть следующий код:

this.cadet = this.cadetCollection.valueChanges().subscribe(x => {
  this.cadetName = x[0].Cadet;
  this.cadetCompany = x[0].Company;
  this.cadetId = x[0].CadetId;
  return x as Cadets[];
}));

Я могу записать данные на консоль, так кака также использовать данные через интерполяцию в моем HTML-шаблон.Однако, что мне действительно нужно сделать, это сохранить данные в свойстве компонента или переменной, чтобы я мог использовать некоторые данные для расчетов.

Я все еще довольно плохо знаком с угловатыми и наблюдаемыми, поэтому, пожалуйста,kind:)

После некоторых комментариев я попытался сделать следующее:

    this.cadets = this.cadetCollection.valueChanges().subscribe(x => {
  this.cadetName = x[0].Cadet;
  this.cadetCompany = x[0].Company;
  this.cadetId = x[0].CadetId;
  this.cadet = x[0];
  console.log(this.cadet);
  return x as Cadets[];
});

console.log('Cadet is ' + this.cadet);

Кажется, что объект возвращается на консоль всякий раз, когда он находится в методе подписки, но после этого не определен.

Answer 1

У вас есть два варианта:

1. Resolver: https://angular.io/api/router/Resolve Средство распознавания изменит состояние после выполнения запроса.

2. async-await:Observable и Promise являются асинхронными, и поэтому ваши переменные в методе подписки не определены.Используя async-await, вы сможете получать данные из подписки в ваших локальных переменных.

   async myMethod(){
     this.cadet = await this.cadetCollection.valueChanges().subscribe(x => {
     this.cadetName = x[0].Cadet;
     this.cadetCompany = x[0].Company;
     this.cadetId = x[0].CadetId;
     return x as Cadets[];
   }));
   }
   

Answer 2

Был пользователь, который разместил этот ответ ранее, но я его больше не вижу.

То, что я смог сделать, - это создать метод, который устанавливает значение в свойстве, а затем вызвать этот метод в методе подписки для наблюдаемой.

  this.cadets = this.cadetCollection.valueChanges().subscribe(x => {
  this.cadetName = x[0].Cadet;
  this.cadetCompany = x[0].Company;
  this.cadetId = x[0].CadetId;
  this.cadet = x[0];
  this.setCurrentCadet(x[0]);
  console.log(this.cadet);
  return x as Cadets[];
});

Спасибо всем, кто прокомментировал и помог мне с этим!

Answer 3

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

Вы работаете с асинхронным программированием , вы не можете приостановить выполнение кода, и ваша подписка будет разрешена в будущем, но вы не можете предсказать, когда. что вы можете сделать: вы можете сохранить значение в свойстве класса и вызвать метод внутри подписки, который гарантирует, что метод вызывается только тогда, когда ваш кадетский объект заполнен не ранее этого. Для лучшего понимания см. this .

public cadet=[];
this.cadet = this.cadetCollection.valueChanges().subscribe(x => {
 this.cadet=x;
this.myMethod(this.cadet);//your logic
}));

Answer 4

Вы можете просто сделать это, как предложил Кевин:

public cadet = {} this.cadetCollection.valueChanges().subscribe(x => this.cadet = x ));

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

Answer 5

Предположим, у вас есть свойство cadet в том же компоненте, вы можете просто присвоить x[0] this.cadet:

this.cadetCollection.valueChanges().subscribe(x => {
  this.cadet = x[0];
}));

Обновления после предоставления новой информации:

Кажется, что объект возвращается на консоль всякий раз, когда он находится в методе подписки, но после этого не определен.

Не совсем - код в блоке подписки выполняется асинхронно, поэтому покупайте время console.log('Cadet is ' + this.cadet);, блок подписки еще не был выполнен!