Angular Kendo UI DropDown中的禁用选项

Question

可以在剑道下拉列表中禁用选项吗？或者从列表中隐藏它们？在html中，它是：

<select>
  <option value="volv" [disabled]="">Volvo</option>
  <option value="saa">Saab</option>
  <option value="vw">V</option>
</select>

在剑道DropDown里怎么做呢？

<div class="example-wrapper">
            <kendo-combobox
                [data]="listItems"
                [textField]="'text'"
                [valueField]="'value'"
                [value]="selectedValue"
                [valuePrimitive]="true">
                <ng-template kendoComboBoxItemTemplate let-dataItem>
                    <span class="template">{{ dataItem.value }}</span> {{ 
                       dataItem.text }}
                </ng-template>
            </kendo-combobox>
</div>

谢谢,

Answer 1

我看不到他们在Kendo UI for Angular的文档中有这样的东西。我建议过滤掉你想要“禁用”的元素。你可以使用任何你喜欢的方法。我更喜欢lodash：https://lodash.com/docs/4.17.4#filter

Answer 2

Kendo没有解决方案。可以这样解决：

    <kendo-combobox (valueChange)="valueChange($event);" [placeholder]="'xxx" [data]="data"  [textField]="'Value'" [valueField]="'Value'" >
  <ng-template kendoComboBoxItemTemplate let-dataItem>
    <button class="template"  [disabled]="!dataItem.Max" >{{dataItem.Value}}</button>
  </ng-template>
 </kendo-combobox>

或者：

    @Component({
  selector: 'my-app',
  styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
  template: `
    <div class="example-wrapper">
        <kendo-combobox
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="selectedValue"
            [valuePrimitive]="true"
            (open)="onOpen($event)"
        >
            <ng-template kendoComboBoxItemTemplate let-dataItem>
                <button>{{ dataItem.text }}</button>
            </ng-template>
        </kendo-combobox>
    </div>
  `,
  styles: [`
  .disabled {
    pointer-events:none;
    opacity:0.6;         

  }
  `],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue;

    onValChange(e){

    }
    onOpen(){
      let liArr

      setTimeout(()=>{
        liArr = Array.from(document.getElementsByClassName("k-item"))
        liArr.forEach(el => {
          if(el.innerText.indexOf('Small') != -1){
            el.classList.add("disabled")
          }
      })
      })
    }
}

Answer 3

这是可能的，

下面的示例演示当绑定到复杂数据时，如何使用itemDisabled属性禁用特定的列表选项。

https://stackblitz.com/run

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/disabled-items/