Потеря значений вне функции

Question

У меня есть это:

@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}`]);

    }

А это 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>

Вот что происходит: Когда я запускаю страницу, я получаю от идентификатора маршрута идентификатор от объекта. Я ищу его и помещаю в «профессор», и помещаю всех «профессоров» в другой массив для представления на странице.

Когда я печатаю переменные типа this.professores в консоли журнала, это нормально, но за пределами подписки они не определены. Что я могу сделать? Почему я теряю все данные?

Answer 1

Функция «подписка» является асинхронной, в этом случае порядок выполнения функции не совпадает в коде.

для решения попробуйте:

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