爲什麼我不能訪問變量「total_clients」？

Question

如何訪問這個超出escope的變量？

出口類ClientsComponent實現的OnInit { 標題：字符串=「所有客戶機」

clients: Client[] = []; 
response: any; 
total_clients: number; 
total_pages: number; 
pages: any[] = []; 

constructor(private _clientService: ClientService) {} 

ngOnInit() { 

    this._clientService.getData() 
     .subscribe(
     data => this.response = data, 
     err => console.error(err), 
     () => { 
      this.clients = this.response.data, 
      this.total_clients = this.response.total 
      } 
     ); 


    console.log(this.total_clients); <- i can not access this 


} 

Answer 1

這是不超出範圍，它只是沒有當this.total_clients印刷控制檯填充。所有的HTTP請求都是異步操作，因此，如果您要訪問它，你可以做到這一點在認購，這樣的：

ngOnInit() { 

    this._clientService.getData() 
     .subscribe(
     data => this.response = data, 
     err => console.error(err), 
     () => { 
      this.clients = this.response.data, 
      this.total_clients = this.response.total 
      console.log(this.total_clients); <- this will print your data 
      } 
     ); 


    console.log(this.total_clients); <- this is executed before the call is finished, as you will see 


} 

Answer 2

需要初始化在構造函數中的變量，然後在從回調來填充它異步調用。以下是完整的代碼：

export class ClientsComponent implements OnInit { title: string = "All Clients" 
    clients: Client[] = []; 
    response: any; 
    total_clients: number; 
    total_pages: number; 
    pages: any[] = []; 

    constructor(private _clientService: ClientService) { 
    this.clients = []; 
    this.total_clients = 0l 
    } 

    ngOnInit() { 
    this._clientService.getData() 
     .subscribe(
     data => { 
      this.clients = this.response.data; 
      this.total_clients = this.response.total; 
     } 
     err => console.error(err) 
    ); 
    } 
}