Losing values outside function

Question

I've got this:

@Component({
  selector: 'app-edit',
  templateUrl: './altera-estatutos.component.html',
  styleUrls: ['./altera-estatutos.component.css']
})
export class AlteraEstatutosComponent implements OnInit {

  id: String;
  professor: Utilizador;
  updateForm: FormGroup;
  professores: Utilizador[];
  avaliacaoEditar : any = {};


  constructor(private avalService: AvaliacaoService, private userService: UtilizadorService ,private router: Router, private route: ActivatedRoute, private snackBar: MatSnackBar, private fb: FormBuilder) {
    this.createForm();
  }

  createForm(){
    this.updateForm = this.fb.group({
      docente: ['', Validators.required],
    });
  }


  ngOnInit() {
    this.route.params.subscribe(params => {
      console.log(params);
      this.id = params.id;
      if( this.id != undefined){
        this.userService.getUtilizadoresById(this.id).subscribe( (res: any) => {
        console.log(res);
        this.professor = res;
        this.updateForm.get('docente').setValue(this.professor);
        console.log(this.updateForm.get('docente').value);
        });
      }
    });
    this.userService
    .getUtilizadores()
    .subscribe((data: Utilizador[]) => {
      this.professores = data;
      console.log('Data requested ...');
      console.log("-------------");
      console.log(this.professor);
      console.log("--------------");

    });
    }

    editEstatutos(id){
      this.router.navigate([`/app/altera-estatutos/${id}`]);

    }

And this is the HTML

<form style="margin-left: 22%"[formGroup]="updateForm" class="edit-form">
  <mat-form-field class="field-full-width">

    <mat-select style="width:500px" placeholder="Docente" formControlName="docente" #docente>
      <mat-option *ngFor="let disc of professores" [value]="disc">
        {{disc.nome}}
      </mat-option>
    </mat-select>

  </mat-form-field><br>      </form>
  <button style="margin-left:40%" mat-raised-button color="primary" (click)="editEstatutos(docente.value._id)">  Procurar Estatutos </button>
  <br><br>
  <span class="cgb">Adicionar </span><span class="cg">Estatuto</span>

Here's what happens: When I run the page, I receive from the ID route the ID from an object. I look for it and put it in "professor", and get all "professores" into another array, to present on the page.

When I print variables like "this.professores" on log console, it is ok , but outside the subscribe they are undefined. What can I do? Why am I losing all the data?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — John Montgomery, May 20 '19 at 23:31

score 1 · Answer 1 · answered May 20 '19 at 23:29

The function "subscribe" is async, in this case, the function execution order is not the same in the code.

for solution try:

this.route.params.subscribe(params => {
      console.log(params);
      this.id = params.id;
      if( this.id != undefined){
        this.userService.getUtilizadoresById(this.id).subscribe( (res: any) => {
        console.log(res);
        this.professor = res;
        this.updateForm.get('docente').setValue(this.professor);
        console.log(this.updateForm.get('docente').value);
        secondFunction()
        });
      } else {
        secondFunction()
      }
    });

    secondFunction() {
      this.userService
      .getUtilizadores()
      .subscribe((data: Utilizador[]) => {
      this.professores = data;
        console.log('Data requested ...');
        console.log("-------------");
        console.log(this.professor);
        console.log("--------------");
      });
    }

Losing values outside function

1 Answers1