Не удалось найти elementById для содержимого mat-card

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