El método que utiliza datos obtenidos a partir de un observable en su propio componente devuelve undefined, cuando se utiliza como Entrada()

0

Pregunta

He creado una plantilla example.component.html que recibe un método como una variable a su haga clic en acción:

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

en el example.component.ts archivo, el método trata de una entrada(), así que puedo usar esta plantilla en varias situaciones:

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

Aquí es donde se pone complicado. En el componente de los padres, el método que se activan al hacer clic se utiliza una variable que viene a partir 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 principal es la suscripción businessEntityService observables y he de verificación tiene en datos de hecho, cuando hago clic en el botón, los registros de la consola undefined.

Entiendo que esto probablemente tiene que ver con el alcance y la pila está buscando this.business en los niños de componentes, sin embargo, me gustaría saber si hay de todos modos para llamar a un método que utiliza una variable a partir de una suscripción de su propio componente de Entrada().

angular rxjs typescript
2021-11-24 03:00:01
1

Mejor respuesta

2

El this contexto en que se está perdiendo (creo). Puede ocurrir al pasar los métodos de la clase como params

Reemplace el ParentExampleComponent#onClick con el método de:

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

Nota: detrás de las escenas, los Manuscritos ahora tratar onClick como una propiedad de clase, y se mueve ese código en el constructor. El uso de una flecha función bloquea el this contexto de esa función

2021-11-24 07:10:18

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................