直接在 Angular HTML 模板中引用没有 ViewChild 的元素

Question

我有一个像这样的图像元素：

<img #imgElement *ngIf="data.image" [src]="data.image" width=200 />

我打算在其正下方打印图像的尺寸，例如

{{imgElement.naturalWidth}} x {{imgElement.naturalHeight}}

但是我得到了错误：

类型 MyComponent 上不存在属性“imgElement”。

有没有办法在组件中不包含@ViewChild('imgElement') 的情况下实现这一点？

Answer 1

问题在于*ngIf 部分。没有那个元素是直接可引用的。

即

<img #imgElement [src]="data.image" width=200 />

{{imgElement.naturalWidth}} x {{imgElement.naturalHeight}}

编辑：

正如@DM 提到的，一个好的解决方案是将整个块包装在*ngIf 中，例如，

<ng-container *ngIf="data.image">
  <img #imgElement [src]="data.image" width=200 />

  {{imgElement.naturalWidth}} x {{imgElement.naturalHeight}}
</ng-container>