如何添加“全选”功能，NG-选择在角5

Question

我发现了一个例子，可以做“全选”：qazxsw POI

但是，我得到一个错误：https://ng-select.github.io/ng-select#/multiselect-checkbox我很奇怪，为什么我得到这个错误，以及如何实现“全选”采用NG-选择在角5。

谢谢

Answer 1

在角5个限制您使用Cannot read property 'selected' of undefined.（或<V2.X）的1.6.3版本使用ng-select，但可以使用ng-select头模板实现此目的。我包括下面的代码，但是这是一个工作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

Answer 2

如果你不使用反应形式，并想用选择HTML文件，然后在*的.ts文件ngselect标签内的所有属性，那么＃getModelValue =“ngModel”，添加以下代码：

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

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