Как получить доступ к переменной, которая находится внутри подписки в Angular - PullRequest
Новая
       13

Как получить доступ к переменной, которая находится внутри подписки в Angular

0 голосов
/ 10 апреля 2019

У меня проблема с доступом к переменной, которая находится внутри подписки. Здесь я включаю код и в ngOninit, у меня есть служба, которая возвращает объект и из этого объекта, я могу получить JSON, который я хочу, а затем я пытаюсь сохранить его в переменной, а затем я пытаюсь получить доступ к этой переменной за пределами подписаться на которые я не смогу это сделать. Так как же я могу использовать переменную вне подписки. 

ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    this.dataService.GetFormById(+id).subscribe(response => {
      console.log(response);
      const temp = response['TemplateJson'];
      var Data = temp;
    })

    initJq();
      var formData = Data

      this.formBuilder = (<any>jQuery('.build-wrap')).formBuilder({ formData });

     // Sample code to handle promise to get for data on page load directly
      this.formBuilder.promise.then(formBuilder => {
        console.log(formBuilder.formData);
      });
  }

В этом коде внутри подписки есть переменная Data, а во времени у меня есть json, так как я могу сохранить эти данные в переменной formData.

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Это довольно просто, 

data: any;
ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    const that = this;
    this.dataService.GetFormById(+id).subscribe(response => {
      console.log(response);
      // const temp = response['TemplateJson'];
      that.data = response['TemplateJson'];
    })

  }

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

Пример 

data: any;
ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    const that = this;
    this.dataService.GetFormById(+id).subscribe(response => {
      // this is an asynchronous callback
      console.log(response);
      // const temp = response['TemplateJson'];
      that.data = response['TemplateJson'];
      that.generateForm();   // calling method after initializing the this.data variable
    })
  }
generateForm() {
    // just copying your question content to give you an idea
    const formData = this.data;
    this.formBuilder = (<any>jQuery('.build-wrap')).formBuilder({ formData });
    this.formBuilder.promise.then(formBuilder => {
    console.log(formBuilder.formData);
  });
}
0 голосов
/ 10 апреля 2019

2 способа, которые я могу придумать, в зависимости от вашего кода: просто установите глобальную переменную и укажите ее в своей подписке: 

`
data = null; //here
const id = this.route.snapshot.paramMap.get('id');
this.dataService.GetFormById(+id).subscribe(response => {
  console.log(response);
  const temp = response['TemplateJson'];
  this.data = temp; //here use it wherever you want using this.data, but check if its null
})

initJq();
  var formData = Data

  this.formBuilder = (<any>jQuery('.build-wrap')).formBuilder({ formData });

 // Sample code to handle promise to get for data on page load directly
  this.formBuilder.promise.then(formBuilder => {
    console.log(formBuilder.formData);
  });
}`

Или (так как большая часть кода, который требует данных из подписки, должна выполнятьсяasync) просто используйте канал rxjs и передайте данные методу или любому другому оператору, которого вы хотите: 

 this.dataService.GetFormById(+id).pipe(
  map(response => {
  console.log(response);
  const temp = response['TemplateJson'];
  const data = temp;
  return data
    }),
  tap((data)=>{ // can be anyother operator and the map above can also be removed 
     //do something
    })).subscribe();
...