Angular无法分配给对象“[object HTMLImageElement]”的只读属性“offsetTop”

Question

我尝试更改 dom 中元素的位置，但收到此错误。我使用 elementRef。

网页：

<div class="container">
  <div class="original-pdf">
    <pdf-viewer *ngIf="pdfSrc" [(page)]="pageVariable" [show-all]="true" [render-text]="true" [original-size]="true"
      [src]="pdfSrc">
     </pdf-viewer>
     <img #Signature *ngIf="imageExpress" class="signature-image" [src]="imageExpress | safeHtml" cdkDragBoundary=".original-pdf"
     (cdkDragEnded)="onDragEnded($event)" cdkDrag>
  </div>
</div> 

TS：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@ViewChild('Signature', {static: false }) Signature: ElementRef;

ngAfterViewInit() {
    this.openPdf();
    this.openImage();
    setTimeout(() =>{
      console.log(this.Signature.nativeElement.offsetTop);
      this.Signature.nativeElement.offsetTop = 0;
    }, 1000);
  }

Answer 1

来自MDN 文档

HTMLElement.offsetTop 只读属性返回当前元素相对于 offsetParent 节点顶部的距离。

offsetTop是只读属性。这就是为什么你会收到这样的错误。

Angular Cannot assign to read only property 'offsetTop' of object '[object HTMLImageElement]'

也许您可以使用该top房产而不是offsetTop

this.Signature.nativeElement.style.top = "0px";