Metoda, która wykorzystuje dane pochodzące z obserwowanego na swoim własnym składniku, zwraca wartości nieokreślone, kiedy jest stosowany jako danych wejściowych()

0

Pytanie

Stworzyłem szablon example.component.html który otrzymuje metoda jako zmiennej dla swej ważności kliknięcia:

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

na example.component.ts plik metoda pochodzi z wprowadzania(), więc mogę użyć tego szablonu w kilku sytuacjach:

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

To tu wszystko się komplikuje. W nadrzędnym elemencie metoda, który zostanie uruchomiony po kliknięciu, wykorzystuje zmienną uzyskanych z obserwowanych:

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

Nawet jeśli nadrzędny składnik podpisany przez businessEntityService obserwujący i sprawdziłem, że ma rzeczywiste dane, gdy wciskam przycisk, konsola jest rejestrowane undefined.

Rozumiem, że jest to prawdopodobnie związane z obszarem działania, i stos szuka this.business jednak w podrzędnej składniku chciałbym wiedzieć, czy można w każdym razie wywołać metodę, która wykorzystuje zmienną z subskrypcji z własnego komponentu jako danych wejściowych().

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

Najlepsza odpowiedź

2

To this kontekst jest stracone (chyba). Może się zdarzyć podczas biegu metod klasy jako parametry

Wymień ParentExampleComponent#onClick sposób:

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

Uwaga: za kulisami Typescript teraz będzie obsługiwać onClick jak właściwość klasy i przenosi ten kod do konstruktora. Korzystanie z funkcji strzałki blokuje this kontekst tej funkcji

2021-11-24 07:10:18

W innych językach

Ta strona jest w innych językach

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