angular - 如何在 Angular 5 中向 ng-select 添加 "select all"功能

Question

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

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

谢谢

Answer 1

使用 ng-select在 Angular 5 中，您只能使用 v1.6.3 的 ng-select (或 < v2.x)，但您可以使用 ng-select header 模板。我包含了下面的代码，但这是一个有效的 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>

然后在您的 Controller 中，您将使用映射为仅包含您提供给 ng-select 的绑定(bind)值的值数组修补表单控件。 ，它们是 bindValue关键值。

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

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