单击角度时隐藏按钮答案

【问题标题】：Hide button when clicked in angular单击角度时隐藏按钮
【发布时间】：2021-04-23 12:46:57
【问题描述】：

我有一个包含输入的按钮，用于将文件上传到我的 Angular 应用程序，我想添加一个单击事件来监听单击该按钮的时间并将其隐藏，因此每次单击该按钮以上传文件它被隐藏了，因为我打算用进度条替换它。

这是我试过的代码：

<div (click)="fileField.click()" (fileDropped)="upload($event)">
      <div *ngIf="this.isButtonVisible">
      <button
        class="button is-primary mt-2"
        (click)="this.isButtonVisible = false"
      >
        <input
          type="file"
          name="txts"
          #fileField
          (change)="upload($event.target.files)"
          hidden
          multiple
        />
        Upload
      </button></div>
      <!-- Progress Bar -->
      <div *ngIf="progress">
        <div class="progress is-primary form-group">
          <div
            class="progress-bar progress-bar-striped bg-success"
            role="progressbar"
            [style.width.%]="progress"
          ></div>
        </div>
      </div>
    </div>

我收到以下错误 Property 'fileField' does not exist on type 'SourceComponent'. 它与 ngIF 有关，我该如何解决？

提前谢谢你。

【问题讨论】：

你为什么写fileField.click()？
您的<input type="file"> 无论如何都被隐藏了，因此请尝试使用 (click)` 处理程序将其放在 div 之外。我怀疑有些冲突，因为您正在尝试模拟对您单击的 div 内的元素的单击
嘿，@JeremyThille 谢谢你成功了，有没有办法在下载完成后取消隐藏按钮？
我认为更好的解决方案是将*ngIf="this.isButtonVisible" 直接放在顶部 div 上，即带有（单击）处理程序的那个，里面有按钮。这样，（点击）挂钩和解除挂钩的同时 div 被销毁和重建。
嘿@JeremyThille 我刚刚看到你的回放，我尝试了你的建议，但是现在当按钮由于某种原因被隐藏但输入窗口没有显示时什么也没有发生

标签： javascript angular typescript

【解决方案1】：

你说得对，问题与*ngIf 有关。修复错误的一种方法是使用 hidden 指令来隐藏 div：

 <div [hidden]="!this.isButtonVisible">

StackBlitz example

【讨论】：