克隆项目后遇类型不匹配错误：HTMLDivElement无法分配给HTMLImageElement

核心原因 #

你遇到的HTMLDivElement无法分配给HTMLImageElement的报错，本质是模板标记和TS参数类型不匹配：

• 模板里#optionImage标记的是包裹img的<div>元素
• TS函数enlargeImage却要求传入HTMLImageElement（即<img>标签）
  之前其他项目没触发报错，大概率是因为没启用严格类型检查，克隆的项目开启了严格模式，类型校验更严格才暴露问题。

两种解决方案 #

方案1：把标记移到img标签上（推荐，符合函数原本意图）

如果你的目标是放大图片本身，直接把#optionImage绑定到<img>标签：

<div
  *ngIf="option['opt_image']"
  class="
    mt-2
    test-img-container
    d-flex
    align-items-start
    justify-content-between
  "
>
  <div>
    <button
      type="button"
      class="close-button d-none btn btn-link text-black"
      (click)="enlargeImage(optionImage)"
    >
      <i class="fa fa-times"></i>
    </button>
    <img
      #optionImage
      class="img-responsive"
      [src]="option['opt_image']"
      alt="Option Image"
    />
  </div>
  <button
    class="p-2 btn btn-link text-black"
    type="button"
    (click)="enlargeImage(optionImage)"
  >
    <i class="fa fa-expand" aria-hidden="true"></i>
  </button>
</div>

TS代码无需修改，此时传入的就是正确的HTMLImageElement类型。

方案2：修改TS参数类型（如果要操作外层div）

如果你的需求是放大整个包含图片的div容器，就把TS函数的参数类型改成HTMLDivElement：

enlargeImage(imgRef: HTMLDivElement) {
    if (imgRef.classList.contains('enlarge-image')) {
      this.renderer.removeClass(imgRef, 'enlarge-image');
    } else {
      this.renderer.addClass(imgRef, 'enlarge-image');
    }
}

这样参数类型和传入的div元素匹配，报错就会消失。

内容的提问来源于stack exchange，提问作者Vishal Lengare