在 Angular 中使用 GetElementsByClassName 禁用按钮

Question

I expect such a result 我使用 primeNG 组件 FileUpload。我有树形按钮：选择、上传和取消。我想尝试在使用类名上传文件后禁用“上传”和“取消”等按钮。但这行不通。

<p-fileUpload 
  customUpload="true" 
  multiple="multiple"
  (uploadHandler)="onUpload($event)"
  (click)="disableButton()">
</p-fileUpload>

import { Component} from '@angular/core';
@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
pBtn: any = document.getElementsByClassName("ui-state-disabled") as HTMLCollectionOf<HTMLInputElement>;

disableButton(){
this.pBtn[0].disabled = true;
}

}

Answer 1

禁用的按钮是属性而不是样式。

您可以执行类似于下面的操作，并将 disabled 属性绑定到您可以在上传文件时更改的某个布尔值。 Angular 提供了这样的数据绑定，因此您不必直接从 typescript 文件中修改 dom。

<button [disabled]="disabled"></button>

disable() {
    this.disabled = false;
}

Answer 2

As PrimeNG dosumentation says:

• showUploadButton - 为客户端 FileUpload 定义上传按钮的可见性。
• showCancelButton - 定义客户端 FileUpload 的取消按钮的可见性。

您可以通过属性showUploadButton 或showButtons 隐藏按钮或仅上传按钮。这取决于你需要什么：

    <p-fileUpload 
      #myfileUpload          
      [disabled]="isDisabled"
      [showUploadButton]="isShowUploadButton"
      [showCancelButton]="isSshowCancelButton"
      customUpload="true" 
      multiple="multiple"
      (uploadHandler)="onUpload($event)"
      (click)="disableButton()">
    </p-fileUpload>

打字稿：

isShowUploadButton = true;
isSshowCancelButton = true;
isDisabled = false;


disableButton(){        
    this.isDisabled = true;
    this.isShowUploadButton = false;
    this.isSshowCancelButton = false;
}