Angular实现图片上传预览触发TS7006错误如何解决？

你遇到的问题包含三处错误，分别是TypeScript类型声明缺失、Angular模板绑定语法错误、组件代码多余闭合标签，按以下修改即可实现正常的图片上传预览功能：

1. 修复TS7006类型报错 #

错误原因是onImageUpload方法的event参数没有显式声明类型，TypeScript严格模式下禁止隐式any类型，同时需要对event.target做类型断言才能正常访问files属性。

2. 修复模板图片绑定错误 #

原模板中{src}="imageDisplay"是错误写法，Angular的属性绑定需要用方括号[]，正确写法是[src]="imageDisplay"。

3. 移除组件代码多余闭合标签 #

原组件代码中onImageUpload方法结束后多了一个多余的}，会触发语法错误，需要删除。

修正后的模板代码 #

<div class="p-field col-12">
   <label for="image">主图</label>
     <input type="file" class="p-inputtext" accept="image/*" (change)="onImageUpload($event)">
     <div>
       <img [src]="imageDisplay" alt="预览图">
     </div>
</div>

修正后的组件代码 #

export class ProductsFormComponent implements OnInit {
     
  imageDisplay: string | ArrayBuffer | null | undefined;
       
  constructor() { }
    
  ngOnInit(): void {}

  // 给event添加类型，同时对target做类型断言
  onImageUpload(event: Event){
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];

    if (file) {
      const fileReader = new FileReader();
      
      fileReader.onload = () => {
        this.imageDisplay = fileReader.result;
      }

      fileReader.readAsDataURL(file);
    }
  }    

  get productForm(){
    return this.form.controls;
  }
}

内容的提问来源于stack exchange，提问作者Sheik Mohideen.M