Question

我想在角度2中选择kendo UI multiselect中的所有选项。这是我的html：

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

但我没有得到如何在数据集中选择所有选项，当我点击该选择所有项目时，所有项目都被填入框中。

Answer 1

您需要设置多选＆＃39;值＆＃39;财产与＆＃39;数据相同＆＃39;属性。即数据和值相同，因此将选择所有字段。

在您的情况下，模板后面的组件代码将包含以下内容：

@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>

itemList与MultiSelectComponent的实例一起操作
data输入数据显然

tagMapper

tagMapper可在选择/取消选择操作后更正应用选项
onChange来检测更改。主要逻辑将从此处开始
selectedItems以处理选定的项目。您可以直接通过MultiSelectComponent使用#itemList中的值，但让我们来解决诸如变通方法。

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，但最终取消了选择。对我来说这不适用，但也许对某人来说不是问题

Kendo UI angular 2 multiselect选择所有选项

2 个答案: