Angular 13 无法摆脱 Object is possible null

Question

我有一些代码包含这个：

var element = document.getElementById("div0");
    element.parentNode.removeChild(element); // Error points here

我不断得到：

object is possibly 'null' 并尝试添加！元素，但它仍然抱怨。

我怎样才能摆脱这个错误？

Answer 1

正如@Sh 已经提到的。 Pavel 这是一个 Typescript 错误。

从我的角度来看，您有多种选择，但我只是指出了两个选项，我认为这两个选项最适合您的问题。

选项 1：可选链接

通过使用 optional chaining，代码会在遇到 null 或 undefined 时停止执行。此外，与为每个可能为 null 的属性.

添加保护相比，它生成的代码更简洁、更少

const element = document.getElementById("div0");
element?.parentNode?.removeChild(element);

选项 2：守卫

通过使用守卫，只有在条件为真时才能到达代码部分，因此 Typescript 理解值是在那时定义的

const element = document.getElementById("div0");
if (element && element.parentNode) {
  element.parentNode.removeChild(element);
}

Answer 2

这是typescript抛出的错误，因为document.getElementById的return类型是HTMLElement | null。您可以通过在 tsconfig 中设置 strictNullChecks: false 来禁用此检查，但这是一个有用的检查，因为如果元素不存在于 DOM 中，调用实际上可能 return 为空。您还有其他选项可以在不禁用检查的情况下处理此问题。

您可以检查 null 并处理此案：

const element = document.getElementById('div0');
if (element === null) {
  // you should handle the case in an appropriate way here
  throw new Error('Element "div0" does not exist.');
}

// after the check above, the error will not be thrown anymore
element.parentNode.removeChild(element);

您可以使用 ! 运算符告诉打字稿它应该假定该值永远不会为空：

const element = document.getElementById('div0')!;
element.parentNode.removeChild(element);

请注意，如果 element 在运行时为 null，此方法将导致运行时错误。

或者如果元素不是 null:

，您可以使用 ? 仅调用 removeChild

const element = document.getElementById('div0');
element?.parentNode.removeChild(element);

如果元素不为空，这将仅在 element 上访问 parentNode。否则表达式将计算为 null 并且 removeChild 不会被调用。

Angular 13 无法摆脱 Object is possible null

Angular 13 Cannot get rid of Object is possible null

angular

typescript

angular13