html - 隐藏的上传表单不会在 Angular 中注册更改事件

问题描述

我重构了我的上传表单。想要拥有这个精美的照片图标，但现在不工作。在我拥有此代码并且一切正常之前：

<div class="row user-profile">
        <div class="col-md-4">
            <img class="img-responsive" *ngIf="userApi.path" src="{{createImgPath(userApi.path)}}" />
            <img class="img-responsive" *ngIf="!userApi.path" src="{{createImgPath(usersImages/userApi.user.imageUrl)}}" />
                <form enctype="multipart/form-data">
                    <div id="upload">
                        <label class="btn btn-default btn-file">
                            Browse<input (change)="uploadPhoto()" #fileInput class="btn btn-back" type="file" name="photo" style="display:none" />
                        </label>
                    </div>
                </form>
        </div>

我删除标签元素并添加图标照片元素以及我包含的所有内容到带有类编辑的 div 元素。这是我在 html 中的代码：

<div class="col-md-4 profile-pic">
            <img class="img-responsive" *ngIf="userApi.path" src="{{createImgPath(userApi.path)}}" />
            <img class="img-responsive" *ngIf="!userApi.path" src="{{createImgPath(usersImages/userApi.user.imageUrl)}}" />
            <div class="edit"> 
                <form enctype="multipart/form-data">
                        <i class="material-icons">
                            photo_camera 
                        </i>
                        <input (change)="uploadPhoto()" #fileInput  type="file" name="photo" style="display:none" />
                </form>
            </div>
        </div>

在 css 文件中，我隐藏上传表单并在悬停时显示照片图标。这是我的 css 文件：

 .profile-pic:hover .edit {
        display: block;
    }
    
    .edit {
        position: absolute;
        right: 25;
        top: 0;
        display: none;
        cursor: pointer;
    }
    .edit i{
        background-color:rgba(218, 213, 213, 0.884);
        border: 1px solid bleck;
        color: grey;
        border-radius: 50%;
        padding: 5px;
    }

在我的 ts 文件中，我有方法 uploadPhoto。这是在我的 ts 文件中：

@ViewChild('fileInput',{static: true}) fileInput: ElementRef;
 uploadPhoto(){
    var nativeElement:HTMLInputElement =  this.fileInput.nativeElement;
    this.userApi.upload(nativeElement.files[0]);
  }

当我想单击输入（照片图标）时，什么也没有发生。

标签： htmlcssangulartypescript

html - 隐藏的上传表单不会在 Angular 中注册更改事件

问题描述

解决方案

推荐阅读