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使用了角度输入标签组件（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包？

我刚开始接触Angle 6，但必须有一种简单的方法来解决此问题？

Answer 1

如果允许您编辑具有getData功能的组件，请尝试使用Arrow函数语法，它会自动绑定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);
  }

此关键字的Angular 6范围在子组件中有所不同

1 个答案: