Método que utiliza dados obtidos a partir de um observável em seu próprio componente retorna indefinido quando usado como Entrada()

0

Pergunta

Eu criei um modelo de example.component.html que recebe um método como uma variável para a sua ação de clique:

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

no example.component.ts arquivo, o método vem de uma entrada(), para que eu possa utilizar este modelo em várias situações:

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

Aqui é onde fica complicado. O principal componente, o método que será acionado ao clicar usa uma variável proveniente de um observável:

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

Mesmo que o principal componente é a subscrição businessEntityService observáveis e eu check ele tem em dados de fato, quando eu clicar no botão, o console de logs undefined.

Eu entendo isso provavelmente tem a ver com o âmbito e a pilha está procurando this.business as crianças componente, no entanto, eu gostaria de saber se há uma maneira de chamar um método que utiliza uma variável a partir de uma subscrição a partir de seu próprio componente de Input().

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

Melhor resposta

2

O this contexto está a ser perdido (eu acho). Pode acontecer quando a passagem de métodos de classe como parâmetros

Substitua o ParentExampleComponent#onClick método:

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

Nota: os bastidores, o Typescript vai agora tratar onClick como uma propriedade de classe, e move-se de que o código para o construtor. Usando uma seta função bloqueia o this contexto da função que

2021-11-24 07:10:18

Em outros idiomas

Esta página está em outros idiomas

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