角不能赋值给对象‘[对象HTMLImageElement]’的只读属性“HTMLImageElement”

Question

我试图改变元素在dom中的位置，但是得到了这个错误。我用elementRef。

Html：

<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 DOC

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

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

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

可能您可以使用top属性而不是offsetTop。

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