在订阅内的异步函数中丢失对此的引用

Question

我对 Angular 几乎是新手，我真的对异步和同步方法、await、observables、promise 迷失了方向…… 我有一个按钮，可以打开模式窗口，读取条形码，并使用该条形码的信息向服务器发出请求并对结果执行某些操作。 这是我的代码：

按钮调用的方法：

<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 ordf = this.inputOf;
      try{
        const ordenFabricacion = await this.registroActividadService.getOrdenFabricacion(ordf);
        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 " +ordf);
        }
      }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;
    }
  }

如您所见，buscarOf 是一个异步方法。这是因为它正在向服务器发出一些请求，并且我必须对它们使用等待，因为我必须等待其结果继续。

我的问题是在buscarOf内部，对this的引用丢失了，它是未定义的。 如果我在 afterClosed 订阅中调用非异步方法，则这是已定义的，因此我认为问题出在异步方法上。

因为我希望您拥有有关我的代码的所有信息，以便尝试以正确的方式指导我，所以这就是我发出服务器请求的方式：

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

我尝试将其绑定到这两种方法，但没有成功：

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

我希望有人能帮助我。 谢谢！！

Answer 1

正如 T. Jami 在原帖评论中指出的那样，buscarOf 应该是一个箭头函数，因此将其定义更改为

 buscarOF = async (autoPlay: boolean) => {
//implementation of the method here
}

解决了问题并且this不再是未定义的