Kendo UI angular 2多选全选选项

Question

我希望在angular 2中的kendo UI multiselect中有select all选项。这是我的html：

<kendo-multiselect #testSetsList [data]="testDataSets"
                             [filterable]="true"
                             [(ngModel)]="selectedTestSets">
</kendo-multiselect>

但我不知道如何在数据集中选择所有选项，当我单击选择所有项时，所有项都会填入框中。

Answer 1

您需要将multiselect 'value‘属性设置为与'data’属性相同。即数据和值是相同的，因此所有字段都将被选中。

在您的示例中，模板背后的组件代码将包含以下内容：

@ViewChild('testSetsList') public multiselect: any;

然后，当您获得数据时，您还可以设置值，如下所示：

testDataSets = myArrayOfData;
multiselect.value = myArrayOfData;

Answer 2

简介:很糟糕的是，剑道仍然没有这样的逻辑。

<kendo-multiselect #itemList
                   [data]="data"
                   ...
                   [tagMapper]="tagMapper"
                   (valueChange)="onChange($event)"
                   [(ngModel)]="selectedItems">
</kendo-multiselect>

1. itemList用于操作MultiSelectComponent
2. data input data obviously
3. tagMapper的实例，如果您使用course
4. onChange的tagMapper检测更改，则可在选择/取消选择操作后正确应用选项。主逻辑将从there
5. selectedItems开始操作选定的项目。您可以通过#itemList直接使用来自MultiSelectComponent的值，但让我们将这样的变通方法留作解决方法。

import * as _ from 'lodash';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MultiSelectComponent } from '@progress/kendo-angular-dropdowns';
import { map, tap } from 'rxjs/operators';


@Component({
  selector: 'my-multiselect',
  templateUrl: './my-multiselect.component.html'
})
export class MultiselectComponent implements OnInit {
  // using in that example such type for clarity
  private selectAllOption: { key: string; value: string; } = { key: null, value: 'Select all' };

  @ViewChild('itemList') public itemList: MultiSelectComponent;

  public data: { key: string; value: string; }[];
  public selectedItems: any[];

  public ngOnInit() {
    this.service.getData()
      .pipe(
        map(data => {
          // prepending `selectAllOption` before all data. it will be like an additional item
          return _.concat([this.selectAllOption], data);
        }),
        tap(data => this.data = data),
      )
      .subscribe();
  }

  public tagMapper(tags: any[]): any[] {
    // here `this` links to `MultiSelectComponent` instance so `value` property doesn't relate to our component.
    // it was done via `this['value']` to tag selected or untag deselected values postfactum otherwise even if you will select all values not of them will be tagged. To check it you can just use `tags` instead of `this['value']`
    const selected = this['value'];

    return selected < 3 ? selected : [selected];
  }

  public onChange(data: any[]) {
    // main logic to select or deselect values
    this.selectAll(data);
    // remove `selectAllOption` from resultant selection
    data = this.prepareData();
    // emitter.emit(data)...
  }

  private selectAll(items: any[]) {
    const isSelected = !!_.find(items, { key: null });
    // unfortunately we are not able to get directly a selected item because of `valueChange` logic and neither from private properties
    // so we have to detect intersection between arrays of all currently selected items - `items` and previous items without the last selected - `this.itemList['selectedDataItems']` which we can get only from `MultiSelectComponent` instance
    const isDeselected = !!_.find(this.itemList['selectedDataItems'], { key: null });

    if (isSelected) {
      if (!isDeselected) {
        this.selectedItems = this.data.slice(); // select all
      } else if (this.data.length - items.length === 1) {
        this.selectedItems = _.filter(this.selectedItems, item => !_.isNull(item.key)); // deselect 'select all' element
      }
    } else {
      if (isDeselected) {
        this.selectedItems = []; // deselect all
      } else if (this.data.length - items.length === 1) {
        this.selectedItems = this.data.slice(); // select 'select all' element
      }
    }
  }

  private prepareData(): any[] {
    const items = [...this.selectedItems];
    _.remove(items, item => _.isNull(item.key));

    return items;
  }
}

有一个很小的问题，但对某些人来说，这将是tagMapper的一个重要问题。我还没有找到一个正确的解决方案，如何排除标记的selectAllOption。我的意思是，selectAllOption选项应该在所有的data中，以检测选择和取消选择操作，但是在选择该选项的过程中，我们不能以某种方式在tagMapper中跳过它，如果我们在那里做，我们就会取消选择它。所以我们点击了selectAllOption，但最终它取消了选择。对我来说这是不适用的，但也许对某些人来说这不是问题