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

Question

我在访问已订阅的变量时遇到问题。我在这里包含代码，在 ngOninit 中，我有 returns 对象的服务，从那个对象，我可以得到我想要的 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);
      });
  }

在 subscribe 中的这段代码中有变量数据，临时我有 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 必须在使用之前检查它是否已定义，或者您可以在订阅内的 asynchronous 回调中做任何您想做的事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

根据您的代码，我可以想到 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 管道并将数据传递给水龙头或您想要的任何其他运算符：

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

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

How to access variable which is inside subscribe in Angular

angular

angular2-routing

angular7