Возвращение данных из Observables в Angular - PullRequest
Новая
       3

Возвращение данных из Observables в Angular

0 голосов
/ 05 марта 2020

Я пытаюсь выполнить операции с данными, поступающими из Firestore. Я подписываюсь на наблюдаемое с помощью valuechanges () и пытаюсь извлечь массив объектов, чтобы я мог создать форму на его основе.

Я второй раз использую rx js, и я попробовал все Я знаю, но не смог этого сделать. Я могу console.log желаемого массива внутри подписки, но не могу вернуть его, поэтому я могу использовать его снаружи.

это тс 

export class ExerciseTestsComponent implements OnInit {
  exercises: Observable<any>
  exerciseForm: FormGroup;
  isAnswered: boolean; 
  isCorrect: boolean; 
  helloThere: []


  constructor(
    private fb: FormBuilder,
    private db: AngularFirestore) {}

  ngOnInit(): void {
    let exerciseTest; 
    this.db
    .collection('availableExercises')
    // .doc("xvXCAxUrj4842ItZCyrv")
    // .collection("questions")
    .valueChanges()
    .subscribe(
      res => {
        console.log(res);   
      }
      )
    console.log("below is exerciseTest ")
    console.log(exerciseTest)
    this.createGroup()
  }

  createGroup() {
    console.log("below is my firestore data")
    console.log(this.exercises)
    this.exerciseForm = this.fb.group({});
    this.exercises[0]
    .doc("xvXCAxUrj4842ItZCyrv")
    .collection("questions")
    .forEach(control =>
      this.exerciseForm.addControl(control.prefix, this.fb.control(""))
    );
  }

1 Ответ

1 голос
/ 05 марта 2020

Это немного сбивает с толку относительно проблемы. Я думаю, что вы путаете асинхронный характер.

В вашем ngonInit () вы вызываете createGroup как часть обычного метода, а не как часть обработчика результатов. 

  ngOnInit(): void {
    let exerciseTest; 
    this.db
    .collection('availableExercises')
    .valueChanges()
    .subscribe(
      res => {
        console.log(res);   
        // saving the response to a component local variable
        this.exercises = res;
        // I am calling this.createGroup() inside the result handler; not outside of it. 
       // I'm also passing in the response.
       this.createGroup()
      }
      )
  }

Теперь ваша функция создания группы должна иметь доступ к this.exercises.

В исходной реализации this.createGroup() наиболее вероятно вызывалось до запуска обработчика результатов; и как таковые this.exercises были бы не определены. Но это трудно сказать, поскольку ни в каком месте исходного кода this.exercises не определено или не дано значение.

...