Question

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

Angular-----错误：

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>

Answer 1

请阅读错误信息：

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

您的代码正在或可能试图将 null 设置为 HTMLInputElement 或 EventTarget。由于 null 不是其中之一，因此您需要更新 interface，因此也允许空值：

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

请参阅 TypeScript 手册中的 Unions and Intersection Types 以获取帮助。

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

1 个答案: