在mat-card-content上找不到elementById

Question

在页面上有一个画布可以通过id查找它：

<canvas id="chart" width="400" height="400"></canvas>
document.getElementById("chart")

一切都很好。但是如果我将其包裹在垫卡中，我将找不到它：

    <mat-card>
      <mat-card-title>My title</mat-card-title>
      <mat-card-subtitle>My sub title</mat-card-subtitle>
      <mat-card-content>
        <canvas id="chart" width="400" height="400"></canvas>
      </mat-card-content>
    </mat-card>

结果如下：

document.getElementById("chart")
null

知道为什么吗？

Answer 1

可能当您尝试获取它时，它不在页面上。组件是javascript对象。因此，您需要在加载后获取元素。我不建议以下解决方案。组件初始化时应该这样做。

尝试使用此方法来验证我的假设：

setTimeout(() => {  
    console.log(document.getElementById("chart"))  
}, 5000); // 5 seconds to make sure