Question

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

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

window > perspective > open perspective

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

<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();
  }

有人遇到同样的问题吗？

Answer 1

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

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

Answer 2

使用 [disabled] 属性代替 [readonly] 应该可以解决问题。

<ng-select
    [readonly]="true"
</ng-select>

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

2 个答案: