angular - el método que usa datos recuperados de un observable en su propio componente devuelve indefinido cuando se usa como Input()

Creé una plantilla example.component.html que recibe un método como variable para su acción de clic:

<div>
  <button (click)="method()">click here</button>
</div>

En el archivo example.component.ts, el método proviene de un input(), por lo que puedo usar esta plantilla en múltiples situaciones:

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
})
    export class ExampleComponent implements OnInit {
      @Input() method;
    
      constructor() {}
    
      ngOnInit(): void {}
    }

Aquí es donde se complica. En el componente padre, el método que se activará al hacer clic utiliza una variable que proviene de un observable:

parent-example.component.html

  <example [method]="onClick"></example>

parent-example.component.ts

@Component({
  selector: 'parent-example',
  templateUrl: './parent-example.component.html',
})
export class ParentExampleComponent implements OnInit {
  @Input() method;
  business;

  constructor(businessEntityService: BusinessEntityService) {
    businessEntityService.entities$.subscribe(
      data => (this.business = data),
    );
  }

  onClick() {
    console.log(this.business);
  }

  ngOnInit(): void {}
}

Aunque el componente padre se está suscribiendo al observable businessEntityService y he verificado que de hecho tiene datos, cuando hago clic en el botón, la consola muestra undefined.

Entiendo que esto probablemente tiene que ver con el alcance y que la pila está buscando this.business en el componente hijo, sin embargo me encantaría saber si hay alguna manera de llamar a un método que use una variable de una suscripción desde su propio componente como Input().

Respuesta #1

El contexto this se está perdiendo (creo). Puede ocurrir al pasar métodos de clase como parámetros

Reemplaza el método ParentExampleComponent#onClick con:

onClick = () => {
    console.log(this.business);
}

Nota: detrás de escena, Typescript ahora tratará onClick como una propiedad de clase y moverá ese código al constructor. Usar una función flecha bloquea el contexto this de esa función