Metodo che utilizza i dati recuperati da un osservabili sul proprio componente restituisce undefined quando viene utilizzato come Input()

0

Domanda

Ho creato un modello example.component.html che riceve un metodo come una variabile di fare clic su azione:

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

sul example.component.ts file, il metodo nasce da un input(), quindi posso utilizzare questo modello in più situazioni:

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

Qui è dove le cose si fanno complicate. Il componente principale, il metodo che sarà attivato fare clic su utilizza una variabile proveniente da un osservabili:

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 {}
}

Anche se il componente principale è la sottoscrizione businessEntityService osservabili e ho di controllo ha, infatti, dati, quando clicco il pulsante, il log della console undefined.

Capisco che probabilmente ha a che fare con l'ambito e la pila è alla ricerca di this.business al di componente, tuttavia mi piacerebbe sapere se c'è comunque la chiamata di un metodo che utilizza una variabile da un abbonamento da un proprio componente, come Input().

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

Migliore risposta

2

Il this il contesto è perso (credo). Può accadere quando il passaggio di classe di metodi params

Sostituire il ParentExampleComponent#onClick metodo:

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

Nota: dietro le quinte, Dattiloscritto ora trattare onClick come la proprietà di una classe, e muove il codice nel costruttore. Utilizzando una freccia funzione blocca l' this contesto di tale funzione

2021-11-24 07:10:18

In altre lingue

Questa pagina è in altre lingue

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