如何在Angular 7中使用打字稿获取属性值

Question

I want to take a value from my property, countOnProgress. I can get the value of countOnProgress when I subcribe, but outside subscribe countOnProgress return 0 so I cant use countOnProgress at progressLastYear. How to set value of countOnProgress with value from subcribe without return 0

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { DashboardService } from './dashboard.service';
import { Observable, of, timer } from 'rxjs';
import 'rxjs/add/operator/takeWhile';
import 'rxjs/add/observable/timer';

@Component({
  templateUrl: 'dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  alive = true;
  countOnProgress:number = 0;
  max: number = 200;
  value: number = 100;
  stacked: any[] = [];

  constructor(@Inject (DashboardService) private dashboardService: DashboardService){ 
  }

  ngOnInit(): void {
    Observable.timer(0, 30000)
    .takeWhile(() => this.alive)
    .subscribe(() => {
      this.dashboardService.getCountProgress().subscribe(resp => {
        this.countOnProgress = resp.d;
        console.log(this.countOnProgress); //It found the data
      })
    });
    this.progressLastYear();
  }

  progressLastYear(): void{
    const types = ['success', 'info', 'warning', 'danger'];
    const values = [this.countOnProgress];
    console.log(values);
    this.stacked = [];
    for (let i = 0; i < 5; i++) {
      this.stacked.push({
        value: values[1],
        type: types[i],
        label: values[1]
      });
      console.log(this.stacked); //The datas: 0, succes, 0 (didnt get countOnProgress' value)
    }
  }
}

Thank you

Answer 1

Refactor your code like below :

ngOnInit(): void {
    Observable.timer(0, 30000)
    .takeWhile(() => this.alive)
    .subscribe(() => {
      this.dashboardService.getCountProgress().subscribe(resp => {
        this.countOnProgress = resp.d;
        console.log(this.countOnProgress); //It found the data
        this.progressLastYear();   // < -- move the function call here
       })
    });

  }

Why My code is not working ?

JS is Asynchronous hence it doesn't wait for any I/O request to get complete and keeps executing next lines of code.

In you code both Observable.timer(0, 30000) and this.dashboardService.getCountProgress() is asynchronous . Hence while executing JS will not wait for them to get complete and keep executing the next line of code. As a result the method call this.progressLastYear() got called before the completion of the service call . Hence You were not getting the value of countOnProgress .