如何在 angular 2 轮询服务中访问 .subscribe 之外的值

Question

// 我试图从订阅外部获取值，但它无法分配给任何变量。在我的项目中，使用 http.post() 方法获取 json 内容并将其分配给变量。我想在构造函数之外访问这些变量值..我怎样才能让它成为可能？

ngOnInit(): void {
    this.getSubscription();
}

// here is my subscription function

getSubscription() {
    interval(5000)
        .pipe(
         startWith(0),
         switchMap(() => this._subscriptionService.getSubData()))
         .subscribe(data => {
             this.Result = data; // able to print the data
             JSON.stringify(this.Result);

             console.log(this.Result); // able to print the data
         });

    console.log(this.Result); // undefined is printing                
}

// 我想在订阅之外访问 this.result 并分配给一个 public 变量

Answer 1

在函数外定义结果，如下所示

Result:any;

ngOnInit(): void {
       this.getSubscription();
    }

// here is my subscription function

     getSubscription() {
        interval(5000)
        .pipe(
         startWith(0),
         switchMap(() => this._subscriptionService.getSubData()))
         .subscribe(data => {
          this.Result = data; // able to print the data
          JSON.stringify(this.Result);

          console.log(this.Result); // able to print the data
                     });

           console.log(this.Result); // undefined is printing                
          }

Answer 2

您在 ngOnInit 中调用 getSubscription() 并且此时您的变量 Result 未设置，因为您的 http 请求是异步的。在您的订阅方法第一次执行后，变量被设置。

如果其他函数需要该值，我建议您从您的订阅中调用它们，否则您无法确定您的 http 请求何时完成。

getSubscription() {
    interval(5000)
        .pipe(
         startWith(0),
         switchMap(() => this._subscriptionService.getSubData()))
         .subscribe(data => {
             this.Result = data; // able to print the data
             JSON.stringify(this.Result);

             console.log(this.Result); // able to print the data

             // Is called every time you get a new result and this.Result is set now
             this.processResults();
     });

    // Not set yet
    console.log(this.Result); // undefined is printing                
}

processResults() {
    // Do some stuff with your results, this.Result is set now
}

Answer 3

这是因为 console.log(this.Result) 在 .subscribe() 方法完成之前执行执行。这可以通过使用 async await.

来处理

async ngOnInit(): void {
 await this.getSubscription();
}

如何在 angular 2 轮询服务中访问 .subscribe 之外的值

How to access value outside the .subscribe in angular 2 polling service

polling

subscribe

angular