ng-select значок загрузки на стороне сервера неправильное размещение - PullRequest
0 голосов
/ 20 февраля 2020

Я использую ng-select в моем проекте Angular 9 для поиска и загрузки результатов на стороне сервера. Я следовал инструкциям 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;
      })
    ))
  )
);

ng-select loading icon incorrect placement

Ответы [ 2 ]

1 голос
/ 20 февраля 2020

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

в рабочем примере официального do c следующие параметры, кажется, в порядке.

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

Вы также можете закомментировать следующая строка search-autocomplete-example.component.ts для проверки счетчика.

tap(() => this.peopleLoading = false)
1 голос
/ 20 февраля 2020

Это ошибка в ng-select с темой материала.

Попробуйте добавить этот код CSS:

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