如何访问Angular内部订阅的变量

Question

我有一个访问内部订阅的变量的问题。这里我包括代码和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);
      });
  }

在这个代码内部订阅有变量数据，在temp我有json所以如何将该数据存储在formData变量中。

Answer 1

这非常简单，

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);
  });
}

Answer 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);
  });
}`

或者（因为大多数需要订阅数据的代码必须运行异步），只需使用rxjs管道并将数据传递给tap或任何其他所需的运算符：

 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();