Angular 2 如何禁用 kendo-dropdownlist

Posted

技术标签:

【中文标题】Angular 2 如何禁用 kendo-dropdownlist【英文标题】:Angular 2 how disable kendo-dropdownlist 【发布时间】:2017-05-06 07:26:51 【问题描述】:

我正在尝试禁用 kendo-dropdownlist(名为 ddlChargeType)。

用户不能直接选择值。但应该可以通过编程方式选择它(另一个下拉菜单的有效选择,ddlUoM 以触发相应 ddlChargeType 选项的选择 - 这很好用)。

所以,我的问题是:如何将我的 kendo-dropdownlist ddlChargeType 标记为只读、禁用或 ng-disabled?

我在官方文档中找不到这个:

http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/

谢谢!

【问题讨论】:

【参考方案1】:

使用常量值:

<kendo-dropdownlist [data]="listItems" disabled="'true'"></kendo-dropdownlist>

带有组件值:

@Component(
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="listItems" [disabled]="disabled"></kendo-dropdownlist>`
)
class AppComponent 
    public listItems: Array<string> = ["1", "2", "3"];
    public disabled: true;

参考: http://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownListComponent/#toc-delay

【讨论】:

【参考方案2】:

如果 [disabled]="disabled" 不起作用,您可以使用 [attr.disabled]="disabled?true:null" 代替 [disabled] ="已禁用"

@Component(
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="listItems" [attr.disabled]="disabled?true:null"></kendo-dropdownlist>`
)
class AppComponent 
    public listItems: Array<string> = ["1", "2", "3"];
    public disabled: true;

【讨论】:

【参考方案3】:

用 Angular 2/3/4/5/6/7 试试这个 [disabled]="true"

  <kendo-dropdownlist id="ddlSegment" name="ddlSegment" class="arcm-form-control" [data]="filterList?.SegmentList"  [disabled]="true"
    [textField]="'Segment_Desc'" 
      [valueField]="'ARCM_Segment_ID'"  (selectionChange)="segmentSelectionChange($event)" [(ngModel)]="selectedSegment"  >
    </kendo-dropdownlist>

【讨论】:

以上是关于Angular 2 如何禁用 kendo-dropdownlist的主要内容,如果未能解决你的问题,请参考以下文章

如何禁用 Angular 服务工作者的预检缓存控制标头(调用事件流时)?

如何在 Angular 7 中禁用目标 cdkDropList 中的元素移动/移动

如何在 Angular 中禁用或覆盖 cdk-focused

如何在 Angular 小吃店中禁用背景?

Angular:如何配置日期选择器以禁用多个日期范围?

如何禁用angular2中的输入