Получение неопределенной ошибки при попытке доступа к переменным l oop из ngOnInit () в angular

Question

В функции ngOnInit () я получаю данные от сервиса для использования в остальной части моего компонента. Он не определен нигде вне подписки. Я не уверен, почему.

import { Component, OnInit, Renderer2, HostListener,ViewChild, TemplateRef, Inject} from '@angular/core';
    import { DOCUMENT } from '@angular/common';
    import { NgbModalOptions, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-pattern',
  templateUrl: './pattern.component.html',
  styleUrls: ['./pattern.component.scss']
})

export class PatternComponent implements OnInit {


  public config: any = {};

  constructor(@Inject(DOCUMENT) private document: any,private modal: NgbModal,private pattern:patternService) { }

  ngOnInit(): void {

   this.pattern.Pattern(this.local).subscribe(
      data => {

      for (var i = 0; i < this.length1; i++){
         this.visitedArray[temp1] = [false, this.Patternarray[i]]; //I'm trying to access this in onselect() function. If the value is false I'm trying to do something
         console.log("Visited Array ng:",this.visitedArray[temp1]);
        }
       },
      err => {
        console.error(err);
      }
    );
 }
}

Это моя функция onselect (), где я пытаюсь получить доступ к (this.visitedArray [this.temp1]) из ngOnit, но не могу чтобы получить доступ к этому. 'Visited Array:' undefined печатается в консоли

onselect(row, i) {

      console.log("Visited Array:",this.visitedArray[this.temp1]);
       console.log("visited id:",this.visitedArray[this.temp1][0]);

    }

Answer 1

здесь вызов службы является асинхронным, поэтому сначала будет выполнен код вне subscribe, а код внутри подписки будет выполнен, как только служба вернет данные (что может занять время). поэтому вы пытаетесь получить доступ к переменной до того, как она получит свое значение (т.е. ie внутри подписки), что дает неопределенное значение.

Решением будет начать обработку ваших данных, как только они поступят (т.е. внутри subscribe)

Answer 2

Короче говоря, просто сделайте это:

this.pattern.Pattern(this.local).subscribe(
      data => {
      this.length1 = this.patterns.length;
      this.visited_count=this.length1-1;
     for (var i = 0; i < this.length1; i++) {
          this.Patternarray[i] = this.questions[i].Id;}
     for (var i = 0; i < this.length1; i++){
         this.visitedArray[temp1] = [false, this.Patternarray[i]]; //I'm trying to access this in onselect() function. If the value is false I'm trying to do something
         console.log("Visited Array ng:",this.visitedArray[temp1]);
        }
onselect(row,i); // call onselect from here
       },
      err => {
        console.error(err);
      }
    );