这个关键字的 Angular 6 范围在子组件中是不同的

Question

我有一个组件，我们可以称之为 Profile-Main。Profile-Main具有以下数据检索功能:

getData(text: string): Observable<Response> {
    const baseUrl = environment.apiURL + "Profile/";
    const params = new HttpParams().set('userName', text);

    return this.httpClient
           .get(baseUrl + 'GetUser', {params: params})
           .map(response => <Response>response);
}

现在 Profile-Main Component 使用 Angular 输入标签组件(ngx-chips)。我正在尝试实现将 ref 传递给 getData 函数的自动完成功能，如下所示:

<div class="col-sm-10">
    <tag-input class="tag-chips" [secondaryPlaceholder]="'Enter your User Name'"
                name="userName" [ngModel]="['Test User']" [maxItems]="1" [ripple]="false"
                [onlyFromAutocomplete]="true">

    <tag-input-dropdown [appendToBody]="false" [displayBy]="'Name'" [identifyBy]="'id'"
                  [autocompleteObservable]="getData">
    </tag-input-dropdown>
    </tag-input>
</div>

现在的问题是，当 getData 方法被调用时，this.httpClient 是未定义的，因为此时 this 的范围关键字指的是 TagInputDropdownComponent 而不是 ProfileMainComponent。

我该如何解决这个问题？我看到网上有很多关于输入参数的来源，但问题是我不能直接编辑那个 npm 包？

我是 Angular 6 的新手，但必须有一种简单的方法来解决这个问题吗？

Answer 1

如果允许编辑具有getData 函数的组件，请尝试使用Arrow 函数语法，它会自动绑定(bind)this。

getData = (text) : Observable<Response> =>  {
    const baseUrl = environment.apiURL + "Profile/";
    const params = new HttpParams().set('userName', text);

    return this.httpClient
      .get(baseUrl + 'GetUser', {params: params})
      .map(response => <Response>response);
  }