javascript - 在函数外丢失值

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>

事情是这样的:当我运行该页面时，我从 ID 路由接收到来自对象的 ID。我查找它并将其放入“教授”中，然后将所有“教授”放入另一个数组中，以呈现在页面上。

当我在日志控制台上打印像“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("--------------");
      });
    }