Home > front end >  method that uses data retrieved from an observable on its own component returns undefined when used
method that uses data retrieved from an observable on its own component returns undefined when used

Time:11-25

I created a template example.component.html that receives a method as a variable to its click action:

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

on the example.component.ts file, the method comes from an input(), so I can use this template on multiple situations:

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

Here's where it gets complicated. At the parent component, the method that will be triggered on click uses a variable coming from an 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 {}
}

Even though the parent component is subscribing businessEntityService observable and I've check it has in fact data, when I click the button, the console logs undefined.

I understand this probably has to do with scope and the stack is looking for this.business at the children component, however I would love to know if there's anyway to call a method that uses a variable from a subscription from its own component as Input().

CodePudding user response:

The this context is being lost (I think). Can happen when passing class methods as params

Replace the ParentExampleComponent#onClick method with:

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

Note: behind the scenes, Typescript will now treat onClick as a class property, and moves that code into the constructor. Using an arrow function locks the this context of that function

  • Related