Question

我找到了一个可以“全选”的例子： https://ng-select.github.io/ng-select#/multiselect-checkbox

但是，我收到一个错误：Cannot read property 'selected' of undefined.我想知道为什么会收到此错误，以及如何在Angular 5中使用ng-select实现“全选”。

谢谢

Answer 1

在Angular 5中使用ng-select会限制您使用ng-select（或 v1.6.3 ，但是您可以使用{{1 }}标头模板。我包含以下代码，但这是一个可以正常工作的Stackblitz，作为示例：

ng-select

然后，在控制器中，您将使用一系列值映射来修补表单控件，这些值映射为仅包含您提供给<ng-select [items]="listOfItems" bindValue="id" bindLabel="name" [multiple]="true" placeholder="Select City" formControlName="example"> <ng-template ng-header-tmp> <div> <button class="btn btn-link" (click)="onSelectAll()">Select All</button> <button class="btn btn-link" (click)="onClearAll()">Clear All</button> </div> </ng-template> </ng-select>的绑定值，即ng-select的键值。

bindValue

Answer 2

如果您不使用react表单，并希望使用select all属性，则在html文件和* .ts文件中的ngselect标记内＃getModelValue =“ ngModel”，添加以下代码：

onSelectAll(select: NgModel, values, array) { 
  const selected = this.dropdownList.datas.map(item => item.id);
  select.update.emit(selected); 
}

deselectAll(select: NgModel) {
     select.update.emit([]); 
}

Answer 3

将 ng-select 多选与 group by 结合使用 - 您可以轻松添加“全选”功能。这是完整的例子 -

演示：https://angular-mkv8vp.stackblitz.io

代码：https://stackblitz.com/edit/angular-mkv8vp?file=src/multi-checkbox-group-example.component.html

步骤 1- 调用 select all group by 的方法 - this.selectAllForDropdownItems(this.people);

第 2 步 - 将 selectedAllGroup 添加到该数组的每个项目以进行分组。

selectAllForDropdownItems(items: any[]) {
    let allSelect = items => {
      items.forEach(element => {
        element['selectedAllGroup'] = 'selectedAllGroup';
      });
    };

    allSelect(items);
  };

然后绑定到html

groupBy="selectedAllGroup" [selectableGroup]="true"

如何在Angular 5中向ng-select添加“全选”功能

3 个答案: