document.getElementById('msg').innerHTML 获取 angular 13 的错误

Question

帮忙解决这个问题。想联系数据我想尽办法

(方法) Document.getElementById(elementId: 字符串): HTMLElement |空

Returns 对具有指定 ID 属性值的第一个对象的引用。

@param elementId — 指定 ID 值的字符串。

对象可能是 'null'.ts(2531)

Answer 1

document.getElementById('msg') 将 return 具有 ID“msg”的元素如果它存在。但它可能不存在。这就是为什么响应不是 HTMLElement 而是 HTMLElement | null.

这意味着您必须处理 null 案例。这就是错误信息Object is possibly 'null'.

的意思

如果你知道元素一直存在，你可以断言它不是null，像这样：

document.getElementById('msg')!.innerHTML
                              ^

或者，如果可以null，你可以使用if/else语句

const element = document.getElementById('msg')
if (element) {
  const innerHTML = element.innerHTML;
  [...]
} else {
  [...]
}

这将解决问题，但我必须补充一点，您通常不必在 Angular 中获取带有 document.getElementById 的元素。这会“起作用”，但不是正确的方法。

最好使用 ViewChild 语法（参见 doc）。

在html中，用名称标记目标元素，如下所示：

<div id="msg" #msgElement>
   [...]      ^^^^^^^^^^^
</div>

并且，在 TypeScript 方面：

@ViewChild('msgElement')
msgElement?: HTMLElement

注意，ViewChild 仅在 Angular 生命周期的 AfterViewInit() 方法之后启动。如果你过早地尝试调用它，比如在 constructor 或 OnInit() 中，你将得到 undefined

document.getElementById('msg').innerHTML getting error for angular 13