Losing reference to this in async function inside subscribe

I'm almost new to Angular and I'm really lost with the async and sync methods, await, observables, promises... I have a button that opens a modal window, reads a barcode and with the information of this barcode makes a request to the server and does something with the result. This is my code:

The method called by the button:

<button mat-fab [disabled]="!empleado" extended color="accent" (click)="scanearPlano()" class="mb-2">


scanearPlano(){
this.dialogInfoEscanenando = this.dialog.open(InfoEscaneandoComponent);
this.dialogInfoEscanenando.afterClosed().subscribe((datosRecibidos) => {
if (datosRecibidos) {
//Obtenemos la info del código de barras
if(datosRecibidos && datosRecibidos != ''){
this.inputOf = datosRecibidos;
this.buscarOF(true);
}
}
});
}


async buscarOF(autoPlay: boolean){
if(this.inputOf){
this.sinOf = false;
this.partida = null;
this.plano = null;
this.inputPlano = '';

const of = this.inputOf;
try{
const ordenFabricacion = await this.registroActividadService.getOrdenFabricacion(of);
if(ordenFabricacion){
this.ordenFabricacion = ordenFabricacion;
this.inputPedido = this.ordenFabricacion.partida.split("_")[0];
this.inputPartida = this.ordenFabricacion.partida.split("_")[1];
await this.buscarPartida(false);
this.inputOf = this.ordenFabricacion.numero;
this.plano = this.ordenFabricacion.articulo;
this.inputPlano = this.ordenFabricacion.articulo.terminoBusqueda;
if(autoPlay){
this.play(true);
}
}else{
alert("No se ha encontrado la OF " +of);
}
}catch (err){
if (err instanceof Error) {
this.showError("Error al intentar acceder a los datos. " + err.name, err.message);
} else {
this.showError("Error inesperado.", "Ha ocurrido un error desconocido.");
}
this.ordenFabricacion = null;
}
}else{
this.inputPedido = '';
this.inputPartida = '';
this.partida = null;
this.inputPlano = '';
this.plano = null;
}
}


As you can see buscarOf is an async method. This is because it is making some requests to the server and I have to use await with them because I have to wait for its results to continue.

My problem is that inside buscarOf, the reference to this is lost, it is undefined. If I call a not async method inside the afterClosed subscribe, this is defined, so I assume that the problem is with async methods.

As I want you to have all the information about my code to try to guide me on the right way, this is how I make the server request:

public async getOrdenFabricacion(numero: string): Promise<OrdenFabricacion>{
let queryParams = new HttpParams().append("numero", numero);
return await firstValueFrom(this.http.get<OrdenFabricacion>(this.getOrdenFabricacionUrl, { params: queryParams }));
}


I have tried to bind this to both methods, but it hasn't worked:

constructor(){
this.scanearPlano = this.scanearPlano.bind(this);
this.buscarOF = this.buscarOF.bind(this);
}


I wish someone can help me. Thanks!!

Continue reading...