如果 ng-select 中的列表为空，则隐藏选项列表

Question

如果列表为空，我需要隐藏 ng-select 的选项列表。现在，如果我单击 select 框，或者搜索结果为空，则会显示具有此 No items found 值的选项列表。我不需要这个功能。相反，我需要隐藏选项列表。

<ng-select class="selectable_input" placeholder="PLZ / Ort" [searchable]="true" [searchFn]="customSearch" (search)="searchLocation($event.term)" (clear)="clearLocationList()" (change)="setLocation($event)" formControlName="location" required>

   <ng-option *ngIf="isLocationLoading else noLoader" [disabled]="true"><i class="fa fa-spinner fa-spin"></i> Loading...</ng-option>

       <ng-template #noLoader>

          <div *ngFor="let locations of locationList">
              <ng-option *ngFor="let location of locations" [value]="location">{{location?.zip}} {{location?.place}}
              </ng-option>
          </div>
        </ng-template>

    </ng-select>

Answer 1

将其包装成 div 并使用 ngIf 隐藏它以防列表中没有项目

Answer 2

您可以在 <ng-select> 标签内使用 [isOpen] 属性来实现您的目标，如下所示：

[isOpen] = "!locationList.length? false : null"

如果下拉列表中没有项目，这将阻止打开下拉列表。

另一种选择是将显示文本本身更改为适合您的应用程序的内容，甚至使用 <ng-select>

中的 notFoundText 属性将其设置为空字符串

如果 ng-select 中的列表为空，则隐藏选项列表

Hide option list if list is empty in ng-select

angular-ngselect

angular