Функция, которая работает, когда я получаю данные статически, но когда я получаю данные из API, функция работает, но в конце все стирается

Question

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

Вот мой 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>

Здесь я вызываю свою функцию в компоненте: (listeFamilles объявлен в верхней части компонента, и его тип - любой)

export class EncoursComponent implements AfterViewInit{

  //Variables du controleur

constructor(private serviceFam: FamillesService) {
    this.getFamilles();
}

ngAfterViewInit(): void {
    this.serviceFam.getAllFamilles()
      .subscribe(data => {
        this.listeFamilles = data;
        console.log(this.listeFamilles);
        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"})
          alert('test');
        }
      }, err => {
        console.log(err);
      });
  }

}

Это моя функция вмой сервис:

public getAllFamilles(){
    return this.httpClient.get(this.host+"/listFamilles")
  }

И вот что я получаю в этом списке. Семейство:

(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, nom: "ARRIEL1", couleur: "32cd32"}
1: {id: 2, nom: "ARRIEL2", couleur: "2b78e4"}
2: {id: 3, nom: "TURMO", couleur: "ffffff"}
3: {id: 4, nom: "MAKILA1", couleur: "999999"}
4: {id: 5, nom: "ARRIUS2F", couleur: "ffff00"}
5: {id: 6, nom: "ARRIUS1", couleur: "ff00ff"}
6: {id: 7, nom: "ARRIUS2", couleur: "ff9900"}
7: {id: 8, nom: "ASTAZOU3", couleur: "ffff00"}
8: {id: 9, nom: "RTM322", couleur: "351c75"}
9: {id: 11, nom: "MAKILA2", couleur: "999999"}
10: {id: 12, nom: "ASTAZOU4", couleur: "ffff00"}
11: {id: 13, nom: "ASTAZOU14", couleur: "ffff00"}
length: 12
__proto__: Array(0)