时间戳

首页 > 解决方案 > Ng-Select 不使用 Bootstrap 4 禁用元素

angular - Ng-Select 不使用 Bootstrap 4 禁用元素

问题描述

我在我的 Angular 6 项目中使用 ng-select ( https://github.com/ng-select/ng-select )，并且我最近升级到了 Bootstrap 4。

从那时起，我注意到我用于禁用元素的自定义逻辑现在不再起作用了。

<ng-select
    style="width: 500px;"
    [multiple]="true"
    [(items)]="usersList"
    [closeOnSelect]="false"
    [isOpen]="toggleUsersPicker"
    [(ngModel)]="selectedPeople"
    [virtualScroll]="true"
    (add)="onAdd($event)"
    (remove)="onRemove($event)"
    (clear)="onClear()"
    (change)="onChange()"
    placeholder="Select people"
    bindLabel="label">

    <ng-template ng-header-tmp>
      <button (click)="selectAll()" class="btn btn-light margin10">Select all</button>
      <button (click)="unselectAll()" class="btn btn-light margin10">Unselect all</button>
    </ng-template>

    ...

</ng-select>

然后我的逻辑是禁用元素。

  selectAll() {
       this.selectedPeople = [];
       this.selectedPeople.push({label: 'All'});
       this.selectedNumber = this.usersList.length;

       const usersListTmp = this.usersList.slice();
       for (const u of usersListTmp) {
       u.disabled = true;
       }
       this.usersList = usersListTmp;

       this.onChange();
  }

目标变量的定义是这样的：

  selectedPeople: NgOption[] = [];
  usersList: NgOption[] = [];

有同样问题的人吗？

标签： angularbootstrap-4angular-ngselect

解决方案

确保您引用了 Bootstrap CSS 和以下 JS 库：必须首先出现 jQuery，然后是 Popper.js，然后是 Bootstrap JS。

Bootstrap 4 中的下拉菜单需要Popper.js来显示和定位。

推荐阅读