Почему я не могу получить доступ к переменной «total_clients»?

Question

Как получить доступ к этой переменной, которая отсутствует в обломере?

экспорт класс ClientsComponent реализует OnInit { название: String = «Все клиенты»

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