Angular6 - Passing service call as reference to child component

Question

I'm developing a custom select component which receives data from a service call made by its parent component. If that given call fails by any reason, i need to pass a retry function to the select (the service call itself). The function is called, but, the this isn't passed as expected:

My parent component:

<div class="form-group row mb-4">
    <div class="col-md-12 col-12">
      <custom-select [field]="fields.bank" [formControlName]="fields.bank.controlName" [errors]="submitted ? formControls.bank.errors : null">
      </custom-select>
    </div>
 </div>

fields.bank is a typed object defined in parentComponent.ts which pass some properties, including the retry function:

bank: {
   ...
   retryFunction: this.banksService.queryAll, //<-- banksService is a private variable defined in parentComponent's constructor
},

custom-select.component.html

<div class="select__error">
  <span>
     <a class="select__retry-link" (click)="retry()">retry</a>.
  </span>
</div>

custom-select.component.ts

retry(event?: Event): void {
    if (event) { event.preventDefault(); }
    if (typeof (this.retryFunction) === 'function') {
      this.retryFunction();
    }
  }

service.ts

constructor(
    public httpClient: HttpClient, //<-- it was initially private, but public also doesn't work.
  ) { }

public queryAll(): Observable<Bank[]> {
  return this //<-- this is referring to CustomSelectComponent, not to the service itself. Throws error.
    .httpClient
    .get<BankResponse[]>(environment.apiUrls.banks)
    .pipe(map(result => {
      return this.mapToBankModels(result);
    }));
}

My question is: How can I call the service correctly without this mismatches?

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — ConnorsFan, Aug 29 '18 at 00:31

score 0 · Answer 1 · answered Aug 28 '18 at 22:37

you can make queryAll arrow function

public queryAll = (): Observable<Bank[]> => {
  return this
    .httpClient
    .get<BankResponse[]>(environment.apiUrls.banks)
    .pipe(map(result => {
      return this.mapToBankModels(result);
    }));
}

Or you can specify value of this using Function.prototype.call()

Angular6 - Passing service call as reference to child component

1 Answers1