时间戳

首页 > 解决方案 > TS2345：“事件”类型的参数不可分配给“HtmlInputEvent”类型的参数

javascript - TS2345：“事件”类型的参数不可分配给“HtmlInputEvent”类型的参数

问题描述

我正在尝试上传文件，但出现该错误，请帮我编译。

角度-----错误：

src/app/admin/producto/create-producto-dialog.html:38:47 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'HtmlInputEvent'.
  Types of property 'target' are incompatible.
    Type 'EventTarget | null' is not assignable to type 'HTMLInputElement & EventTarget'.
      Type 'null' is not assignable to type 'HTMLInputElement & EventTarget'.
        Type 'null' is not assignable to type 'HTMLInputElement'.

                         (change)="imgSelected($event)">

来自 component.ts 的代码

interface HtmlInputEvent extends Event{
  target : HTMLInputElement & EventTarget;
} 

export class AppComponent implements OnInit {
  
  public file :File;
  public imgSelect : String | ArrayBuffer;

  imgSelected(event: HtmlInputEvent){
    if(event.target.files  && event.target.files[0]){
        this.file = <File>event.target.files[0];

        const reader = new FileReader();
        reader.onload = e => this.imgSelect = reader.result as String;
        reader.readAsDataURL(this.file);
    }
  }
}

来自 HTML 的代码

<div class="text-center">
      <img alt="Chris Wood" [src]="imgSelect || '../../../../assets/img/default.jpg'" class="rounded-circle img-responsive mt-2" width="128" height="128">
      <div class="mt-2">
          <input class="btn btn-primary" required (change)="imgSelected($event)" type="file" style="width: 100% !important;">
      </div>>
  </div>

标签： javascriptangulartypesweb-frontend

解决方案

请阅读错误信息：

Type 'EventTarget | null' is not assignable to type 'HTMLInputElement & EventTarget'.

您的代码正在或可能试图设置null为HTMLInputElementor EventTarget。由于null不是您需要更新的任何一个，interface因此也允许使用空值：

interface HtmlInputEvent extends Event {
  target: HTMLInputElement & EventTarget | null;
}

请参阅TypeScript 手册中的联合和交集类型 以获取帮助。

推荐阅读