0

我在我的 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[] = [];

有同样问题的人吗？

4

2 回答 2

2

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

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

于 2018-07-28T23:48:20.123 回答
0

而不是[disabled]，使用[readonly]属性应该可以解决问题。

<ng-select
    [readonly]="true"
</ng-select>
于 2021-02-26T08:07:23.813 回答