Question

我有一个环绕输入的按钮，用于将文件上传到我的 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 有关，我该如何解决？

提前致谢。

Answer 1

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

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

StackBlitz example

按角度单击时隐藏按钮

1 个答案: