Les graphiques Ngx ne peuvent pas charger le graphique linéaire à partir du flux correctement, fonctionne avec le fichier local

Question

J'ai un caractère initialisé. Fonctionne bien pour que la configuration soit correctement configurée et que la dépendance soit installée. J'ai suivi l'exemple pour le graphique linéaire et utilisé les données fournies ici: https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html

Fonctionne correctement. Le problème est quand je charge un ensemble de données de l'alimentation de l'API, mon graphe agit étrange, infobulle ne disparaît pas et quelle que soit la route que je clique il charge dans la même fenêtre, alias quelque chose est cassé:

Maintenant, ce sont les données de flux :

{ 
    "currentWeight": 80, 
    "bodyMassIndex": 0, 
    "exercisesProgress": [ 
     { 
      "name": "Bench Press", 
      "series": [ 
       { 
        "name": "10/10/2017", 
        "value": 66 
       }, 
       { 
        "name": "12/10/2017", 
        "value": 78 
       }, 
       { 
        "name": "15/10/2017", 
        "value": 61 
       }, 
       { 
        "name": "18/10/2017", 
        "value": 79 
       }, 
       { 
        "name": "19/10/2017", 
        "value": 74 
       }, 
       { 
        "name": "22/10/2017", 
        "value": 68 
       }, 
       { 
        "name": "23/10/2017", 
        "value": 75 
       }, 
       { 
        "name": "17/11/2017", 
        "value": 76 
       }, 
       { 
        "name": "23/11/2017", 
        "value": 62 
       }, 
       { 
        "name": "23/12/2017", 
        "value": 71 
       }, 
       { 
        "name": "23/01/2018", 
        "value": 68 
       }, 
       { 
        "name": "23/02/2018", 
        "value": 70 
       } 
      ] 
     } 
    ] 
} 

J'INITIALISER alors des données comme celui-ci dans le graphique:

<ngx-charts-line-chart 
     [view]="view" 
     [scheme]="colorScheme" 
     [results]="dashboardModel.exerciseProgress" 
     [gradient]="gradient" 
     [xAxis]="showXAxis" 
     [yAxis]="showYAxis" 
     [legend]="showLegend" 
     [showXAxisLabel]="showXAxisLabel" 
     [showYAxisLabel]="showYAxisLabel" 
     [xAxisLabel]="xAxisLabel" 
     [yAxisLabel]="yAxisLabel" 
     [autoScale]="autoScale" 
     (select)="onSelect($event)"> 
</ngx-charts-line-chart> 

chose ne fonctionne pas. Quand je mets des données directement dans ts.file:

export var multi = [ 
    { 
     "name": "Bench Press", 
     "series": [ 
      { 
       "name": "10/10/2017", 
       "value": 66 
      }, 
      { 
       "name": "12/10/2017", 
       "value": 78 
      }, 
      { 
       "name": "15/10/2017", 
       "value": 61 
      }, 
      { 
       "name": "18/10/2017", 
       "value": 79 
      }, 
      { 
       "name": "19/10/2017", 
       "value": 74 
      }, 
      { 
       "name": "22/10/2017", 
       "value": 68 
      }, 
      { 
       "name": "23/10/2017", 
       "value": 75 
      }, 
      { 
       "name": "17/11/2017", 
       "value": 76 
      }, 
      { 
       "name": "23/11/2017", 
       "value": 62 
      }, 
      { 
       "name": "23/12/2017", 
       "value": 71 
      }, 
      { 
       "name": "23/01/2018", 
       "value": 68 
      }, 
      { 
       "name": "23/02/2018", 
       "value": 70 
      } 
     ] 
    } 
]; 

et initialisez il aime:

<ngx-charts-line-chart 
     [view]="view" 
     [scheme]="colorScheme" 
     [results]="multi" 
     [gradient]="gradient" 
     [xAxis]="showXAxis" 
     [yAxis]="showYAxis" 
     [legend]="showLegend" 
     [showXAxisLabel]="showXAxisLabel" 
     [showYAxisLabel]="showYAxisLabel" 
     [xAxisLabel]="xAxisLabel" 
     [yAxisLabel]="yAxisLabel" 
     [autoScale]="autoScale" 
     (select)="onSelect($event)"> 
</ngx-charts-line-chart> 

Ensuite, il fonctionne. Je ne sais pas ce qui est différent:

Answer 1

Vous chargez des données d'appel api qui est async est prend un certain temps pour revenir et initilize le graphique et penser que ce NGX tableau dosent comme.

Vous avez donc besoin de vérifier quelque chose comme ça dashboardModel?.exerciseProgress ou même mettre le tout dans un ngIf = "dashboardModel"