使用打字稿

Question

我是Typescript的新手，我正在尝试的是从div中删除canvas元素。这是我的HTML代码。

<div class="chart">
    <canvas id="nav-chart"></canvas>
</div>

在单击时使用ID nav-chart删除画布元素。所以这是我的JS代码onclick函数

const elem: HTMLElement = document.getElementById('nav-chart')
if (elem) {
   elem.parentElement.removeChild(elem)
}

尝试此操作时，它会在行
const elem: HTMLElement = document.getElementById('nav-chart')

上引发错误提示

TS2322: Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
  Type 'null' is not assignable to type 'HTMLElement'.

，并在此行elem.parentElement.removeChild(elem)

TS2531: Object is possibly 'null'.

Answer 1

我首先找到了解决方案，我们必须使用HTMLElement | null声明元素类型

const elem: HTMLElement | null = document.getElementById('nav-chart')

并在条件内。

if (elem) {
      elem.parentElement && elem.parentElement.removeChild(elem)
}

Answer 2

这不是Angular的工作方式。

showCanvas = true;

<div class="chart" (click)="showCanvas = false">
    <canvas id="nav-chart" *ngIf="showCanvas"></canvas>
</div>

我强烈建议您在使用Angular进行编码之前，先学习一下Angular的概念。大多数开发人员都像您一样做，并且大多数时候，他们最终会滥用框架。

将所有时间都花在学习框架哲学上，何时学习使用它！