Question

我正在将Kendo-UI MultiSelect用于Angular 2。

该组件工作正常，但我需要设置用户可以选择的最多3个选项的限制。我注意到可以在Angular 1 MultiSelect中执行此操作，但我在Angular 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);
      }
    }
}

Angular 2 - Kendo UI多选选项限制

1 个答案: