Ngx-charts не может правильно загружать линейную диаграмму из фида, работает с локальным файлом

У меня инициализирован символ. Хорошо работает, поэтому конфигурация настроена правильно и зависимости установлены. Я последовал примеру линейной диаграммы и использовал данные, представленные здесь: https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html

Работает корректно. Проблема в том, что когда я загружаю данные из канала API, мой график ведет себя странно, всплывающая подсказка не исчезает, и какой бы маршрут я ни щелкнул, он загружается в том же окне, иначе что-то сломано:  https://user-images.githubusercontent.com/  3589518/31313300-bd04ad70-abd6-11e7-9e71-3d7744d689f4.PNG

Теперь это данные из фида:

{
    "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
                }
            ]
        }
    ]
}

Затем я инициализирую данные на графике следующим образом:

<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>

Вещь не работает. Когда я помещаю данные прямо в 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
          }
      ]
  }
];

а затем инициализировать его как:

<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>

Тогда это работает. Я не уверен, в чем разница:  введите описание изображения здесь


person sensei    schedule 08.10.2017    source источник


Ответы (1)


Вы загружаете данные из вызова api, который является асинхронным, требуется некоторое время, чтобы вернуться и инициализировать график и подумать, что то, что диаграмма ngx, нравится.

Поэтому вам нужно проверить что-то вроде этого dashboardModel?.exerciseProgress или даже поместить все это в ngIf = "dashboardModel"

person Rahul Singh    schedule 08.10.2017
comment
Я поместил div и ngif, спасибо, есть ли какие-нибудь документы, которые я могу прочитать об этом поведении? - person sensei; 08.10.2017
comment
Документы на ng Если этого достаточно, я думаю, причина такого поведения в том, что данные, загруженные из API, являются асинхронными, и требуется время, чтобы добраться до вашего компонента, и для использования в вашем шаблоне вам нужно дождаться данных, чтобы вы могли использовать ? безопасный оператор или ngIf для этого. Подождать, пока данные будут собраны, если данные, переданные в диаграмму, не определены - person Rahul Singh; 08.10.2017