Méthode qui utilise les données récupérées à partir d'une observable sur sa propre composante renvoie undefined lorsqu'il est utilisé comme Input()

0

La question

J'ai créé un modèle de example.component.html qui reçoit une méthode comme une variable à son action du clic:

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

sur le example.component.ts fichier, la méthode vient de l'entrée(), donc je peux utiliser ce modèle sur plusieurs situations:

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

Voici où ça devient compliqué. Le composant parent, la méthode qui sera déclenché sur cliquez utilise une variable provenant d'une 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 {}
}

Même si le composant parent est l'abonnement businessEntityService observables et j'ai vérifier qu'il a dans les données de fait, lorsque je clique sur le bouton, les journaux de la console undefined.

Je comprends ce qui a probablement à voir avec la portée et la pile est à la recherche d' this.business les enfants composant, cependant j'aimerais savoir si il y a de toute façon d'appeler une méthode qui utilise une variable à partir d'un abonnement à partir de son propre composant d'Entrée().

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

La meilleure réponse

2

L' this le contexte est perdu (je pense). Peut se produire lors du passage des méthodes de la classe comme params

Remplacer la ParentExampleComponent#onClick méthode:

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

Remarque: les coulisses, la Machine va maintenant traiter onClick comme une propriété de classe, et des coups de code dans le constructeur. À l'aide d'une flèche fonction verrouille l' this contexte de la fonction

2021-11-24 07:10:18

Dans d'autres langues

Cette page est dans d'autres langues

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