Функция drawLines работает, но линии исчезают после окончания загрузки

Question

Я создал функцию, которая рисует линии в массиве.Я вызываю эту функцию в цикле, чтобы все семейства моего массива были в виде строки.Когда я выполняю программу шаг за шагом, я вижу, что линии хорошо прорисованы, но когда документ закончен для загрузки, линии стираются.

Я вызываю функцию draw в ngAfterViewInit.

Я не ставлю код своей функции, потому что в этом нет необходимости, функция работает хорошо.Я думаю, что это проблема жизненного цикла, но я не знаю, как ее решить.

Это мой HTML.Линии нарисованы в тд.

<table *ngIf="listeFamilles">
  <tbody>
    <tr *ngFor="let f of listeFamilles">
      <th style="vertical-align: middle; padding-left: 10px;">{{ f.nom }}</th>
      <td  id="{{f.nom}}"  style="vertical-align: top;"></td>
    </tr>
  </tbody>
</table>

Здесь я вызываю свою функцию:

ngAfterViewInit(): void {
      this.serviceFam.getAllFamilles()
        .subscribe(data => {
          this.listeFamilles = data;
          for (let f of this.listeFamilles) {
            //console.log(this.listeAffaires._embedded.affaires[0]);
            console.log(f.nom);
            this.draw("#" + f.nom, this.arriel1, {dateDimension: false, color: "teal", labelFormat: "%Y"})
          }
        }, err => {
          console.log(err);
        });

Вот мой код: https://stackblitz.com/edit/angular-tds4sv