角2- Kendo UI多选择选项限制

Question

我用Kendo做角度2。

该组件工作良好，但我需要设置一个限制的最大3选项，用户可以选择。我注意到在角1 MultiSelect中可以这样做，但是在角2文档中找不到任何东西。

有没有人知道我可以将所选选项的最大限制设置为3？

这是我目前的代码

component.html

<kendo-multiselect #sortingsDropdown
                   [data]="fixedData.PossibleValuesForGroupingsAndSortings"
                   [filterable]="true"
                   [textField]="'Name'"
                   [valueField]="'Type'"
                   [value]="sortingsArray"
                   (valueChange)="setSortingsArray(sortingsDropdown.value)">

</kendo-multiselect>

component.ts

public setSortingsArray(values: Array<models.IGroupingAndSorting>) {
    if (values.length <= 3) {
        this.sortingsArray = values;
        this.definitionDetails.Sortings = values;
    }

}

Answer 1

您可以实现类似的行为，如本例所示- http://plnkr.co/edit/tDdP9eIuDrt27QmElTFg?p=preview。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-multiselect
            [data]="data"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="value"
            placeholder="choose only 2 items"
            (valueChange)="handleValue($event)"
        >
        </kendo-multiselect>
    </div>
  `
})
export class AppComponent {
    public data: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public value: Array<{ text: string, value: number }> = [];

    public handleValue(selected) {
      if (selected.length <= 2) {
          this.value = selected;  
      } else {
        this.value = this.value.map(item => item);
      }
    }
}