Angular Ngx图表可以'；t正确地从提要加载折线图，使用本地文件

我正在初始化一个字符。工作正常，因此正确设置了配置并安装了依赖项。我遵循折线图的示例，并使用此处提供的数据：

工作正常。 问题是，当我从API提要加载数据时，我的图形表现得很奇怪，工具提示并没有消失，无论我在同一窗口中单击它加载的是什么路径，也就是说，有些东西坏了：

下面是来自提要的数据：

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

然后初始化它，就像：

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

然后它就起作用了。 我不确定有什么不同：

---

您正在从api调用加载数据，该调用是异步的，需要一些时间来返回并初始化图形，并认为ngx图表是什么样的

所以你需要检查一下这样的东西

dashboardModel？.exerciseProgress

---

或者甚至把整个东西放在一个

ngIf=“dashboardModel”

我放了div和ngIf，谢谢，有没有关于这种行为的文档我可以读到？我想ngIf上的文档就足够了，这种行为的原因是，从API加载的数据是异步的，到达组件需要时间，为了在模板中使用，您需要等待数据，以便使用

？

安全运算符或

ngIf

进行此操作。如果传递给图表的数据未定义，则等待数据排列

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