ng-select 服务器端加载图标位置不正确

Question

我在我的 Angular 9 项目中使用 ng-select 来搜索和加载服务器端结果。我按照 ng-select docs 的说明进行操作并实施了它。当用户开始输入时，我看到加载图标位置略高于（如下所示）。我没有使用任何额外的样式表或 CSS 规则。

HTML:

          <ng-select [items]="allPersons | async"
                           bindLabel="customName"
                           placeholder="Search for Person "
                           [hideSelected]="true"
                           [trackByFn]="trackByPersonFn"
                           [minTermLength]="2"
                           [loading]="personLoading"
                           typeToSearchText="Please enter 2 or more characters"
                           [typeahead]="personInput"
                           style="font-size: 14px"
                           (change)="fetchPersonInformation($event)"
                           [formControl]="personControl">
                </ng-select>

组件：

this.allPersons = concat(
  of([]), // default items
  this.personInput.pipe(
    distinctUntilChanged(),
    tap(() => this.personLoading = true),
    switchMap(term => this.personService.findPersonsBySearchString(environment.BASE_URL+PERSON_API_URL+'/find/search/'+term).pipe(
      tap(data =>
      {
        this.personLoading = false;
      })
    ))
  )
);

Answer 1

这是 Material 主题的 ng-select 中的错误。

尝试添加此 CSS 代码：

.ng-select .ng-spinner-loader {
    bottom: -15px;
}
.ng-select-multiple .ng-spinner-loader {
    bottom: 0px;
}

Answer 2

https://stackblitz.com/edit/angular-ng-select-problem

在官方文档的工作示例中，以下参数似乎可以。

.ng-select .ng-spinner-loader {
    bottom: -20px;
}
.ng-select-multiple .ng-spinner-loader {
    bottom: -8px;
}

您也可以注释掉 search-autocomplete-example.component.ts 的以下行以检查微调器。

tap(() => this.peopleLoading = false)

ng-select 服务器端加载图标位置不正确

ng-select server side loading icon incorrect placement

angular

angular-material

angular-ngselect

angular9