隐藏上传按钮PrimeNG

Question

我正在使用PrimeNG的文件上传： https://www.primefaces.org/primeng/#/fileupload

目前，我有

但我想只有“选择”和“取消”按钮。

所以在primeNG网站上，他们说使用showUploadButton="false"

但它不起作用。

参考这篇文章： Remove File Upload and Cancel Button from Primefaces p:fileUpload

我试过了：

<p-fileUpload ...  showButtons="false" showCancelButton="true"/>

然后我试了

.ui-fileupload-buttonbar .ui-fileupload-upload {
    display: none;
}

没有任何作用。 也许是因为它引用了另一个版本。 我正在使用primeNG 2.0.6版本和角度2.4.0

Answer 1

你必须将showUploadButton放在一个括号内才能工作。

<p-fileUpload [showUploadButton]="false"></p-fileUpload>

Result

编辑：您需要获得最新版本的PrimeNG才能与Angular 4一起使用。自Angular推出Angular 4以来，PrimeNG还推出了PrimeNG v4以与Angular 4配合使用

Answer 2

你试过这样做：

<p:fileUpload ...  [showButtons]="false" [showCancelButton]="true"/>

希望它可以帮到你

Answer 3

为我工作的唯一解决方案是用css隐藏它：

.ui-fileupload-buttonbar button:nth-child(2){
  display:none;
}

Answer 4

使用FileUploader中ng2-file-upload中的.html：

<tr *ngFor="let item of uploader.queue let i = index">
    <td>
      <div *ngIf= "!uploader.queue[i].isUploaded">
       <button type="button" class="btn btn-success btn-xs" style="margin:2px" (click)="onSubmit(i,item,$event.target)" >
        <span class="glyphicon glyphicon-upload"></span> Upload
       </button>
      </div>
    </td>
 </tr>

在component.ts

    public index:number ;
    public onFileSelected() {
      this.uploader.queue[this.index].isUploaded=false; // initializing uploaded to false
    }

    public onSubmit(index:number){
      this.uploadService.uploadFile(this.csvJsonData).subscribe((responseData)=>{
      this.onSubmitresponse = responseData ;
      if(this.onSubmitresponse.status==201){
        this.uploader.queue[index].progress = 100;
        this.toastrService.success('The File has been uploaded successfully !',this.onSubmitresponse.status,{positionClass:'toast-bottom-center'});

        this.uploader.queue[index].isUploaded=true;// will hide the upload button
      }
     else this.toastrService.error(this.onSubmitresponse.errorMessage,this.onSubmitresponse.status,{positionClass:'toast-bottom-center'});
    });

  }

Answer 5

隐藏按钮：

::ng-deep .p-fileupload .p-fileupload-buttonbar {
    display:none;
}

隐藏内容文件：

::ng-deep .p-fileupload .p-fileupload-content {
    display:none;
}

Answer 6

[showUploadButton] =“ false” [showCancelButton] =“ false”