隐藏上传按钮 PrimeNG答案

【问题标题】：Hide upload button PrimeNG隐藏上传按钮 PrimeNG
【发布时间】：2018-01-22 03:46:46
【问题描述】：

我正在使用来自 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 和 angular 2.4.0 的版本

【问题讨论】：

标签： angular upload primeng

【解决方案1】：

您必须将 showUploadButton 放在括号内才能正常工作。

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

Result

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

【讨论】：

【解决方案2】：

您是否尝试过这样做：

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

希望对你有帮助

【讨论】：

不，我无法绑定到“showButtons”，因为它不是“p-fileUpload”的已知属性。
嗯，看起来你没有正确使用它。所以仔细检查你是如何导入模块的......或者它是否真的是 p:fileUpload
对，我正在使用 p-fileUpload。如果我将其更改为 p:fileUpload 它会显示“命名空间 p 未绑定”。在他们的网站上是 p-fileUpload。我该怎么办？
看起来你没有正确导入或安装它..尝试取消你的npm模块重新安装它并看看如何正确导入
我做到了，它不起作用。此外，在他们的网站上，它是用 p-fileUpload 编写的。看起来在我使用的版本上，并非所有变量都可用。

【解决方案3】：

隐藏按钮栏：

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

隐藏 CONTENT 文件：

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

【讨论】：

【解决方案4】：

对我有用的唯一解决方案是用 css 隐藏它：

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

【讨论】：

它不适用于最新版本的 primeNg。 primefaces.org/primeng/v11-lts/#/fileupload

【解决方案5】：

使用来自ng2-file-upload的FileUploader，在.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'});
    });

  }

【讨论】：

【解决方案6】：

[showUploadButton]="false" [showCancelButton]="false"

【讨论】：

这个答案似乎提出了与已经说过的事情类似的解决方案。此外，没有任何关于它的作用的评论，它并没有真正的帮助。