Kendo-Angular：禁用剑道上传中的选择文件按钮

Posted 2023-05-07

【中文标题】Kendo-Angular：禁用剑道上传中的选择文件按钮

【英文标题】：Kendo-Angular: Disable select file button in kendo-upload

【发布时间】：2022-01-12 07:10:41

【问题描述】：

我已经在我的 Angular 项目中实现了剑道上传

component.html

    <kendo-upload
    #upload
    [autoUpload]="false"
    (select)="onSelectEvent($event)"
  (remove)="onRemoveEvent($event, upload)"
  (upload)="onUploadEvent($event)"
  [multiple]="false"
  [restrictions]="myRestrictions">
  </kendo-upload>

我想在如图所示选择文件后禁用“选择文件”按钮，并在用户单击清除按钮或“X”后启用。

请帮助我提出您的建议，因为我是 Kendo 新手，找不到文档。

【问题讨论】：

你好 Kiran，你能说你是哪个版本的 angular 和 kendo ui 吗？

@GRD 角度版本是 12+，剑道版本是 5，我可以在 package.json 文件中看到

您找到解决方案了吗？还是您还在寻找解决方案？

@GRD 我使用了 misha130 建议的 kendo upload [disabled] 属性

【参考方案1】：

文件上传提供了一个禁用属性。这是一个演示：

https://www.telerik.com/kendo-angular-ui/components/uploads/upload/disabled-state/

例如：

<kendo-upload [disabled]="hasFile$ | async"> </kendo-upload>

hasFile$ 在哪里：

public hasFile$ = new BehaviorSubject(false);

如果您只使用布尔值而不是可观察值，则更改检测不会检测到它

只禁用按钮而不禁用上传的其余部分：

(this.upload.fileSelectButton.nativeElement as HTMLElement).classList.add('k-state-disabled');

【讨论】：

感谢您的建议，但这会禁用整个上传部分以及“X”标记，因此用户无法删除附件并再次上传。

您有 (this.upload as UploadComponent).fileSelectButton 或 (this.upload as UploadComponent).fileSelect 两者都具有禁用属性。我现在没有环境来测试这个，但这可能是要走的路。访问文件选择并在 ts 中禁用它

在答案中添加了一种仅禁用按钮的方法