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

【问题标题】：How to add "select all" functionality to ng-select in Angular 5如何在 Angular 5 中向 ng-select 添加“全选”功能
【发布时间】：2019-01-02 05:28:06
【问题描述】：

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

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

谢谢

【问题讨论】：

selectedPeople.map(el => el.selected = true) 呢？
你能说得更具体点吗？

标签： angular multi-select angular-ngselect

【解决方案1】：

在 Angular 5 中使用 ng-select 会限制您使用 ng-select（或 v1.6.3，但您可以使用 ng-select 标头模板来完成此操作。我包含了下面的代码，但这是一个有效的Stackblitz 我作为示例放在一起：

<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 键值）的值数组修补表单控件。

public onSelectAll() {
  const selected = this.listOfItems.map(item => item.id);
  this.form.get('example').patchValue(selected);
}

public onClearAll() {
  this.form.get('example').patchValue([]);
}

【讨论】：

它工作得非常好，唯一的问题是在单击“选择所有值”后会修补但下拉列表仅保留在那里，直到我们单击下拉列表之外。你能告诉我如何克服它。
你可以这样做：在 HTML 中：使用 # 在TS中：声明视图子@ViewChild('serviceTypeDropdown') private serviceTypeDropdown: NgSelectComponent;在修补值后的所有选择方法中，您可以简单地调用此函数：this.serviceTypeDropdown.close();

【解决方案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([]); 
}

【讨论】：

【解决方案3】：

使用带有分组依据的 ng-select 多选 - 您可以通过简单的方式添加“全选”功能。这是完整的示例 -

演示：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"

【讨论】：