Question

在将延迟加载实现到我的Nativescript Angular应用程序中之前，财务和面积图将不会出现加载数据的问题。

实现它后，我注意到该图表将被加载，但是会收到以下消息，表明Android上没有数据加载（这也影响了iOS，但没有消息出现）：

NoHorizontalAxis
NoVerticalAxis
NoSeries

我可以肯定地确认数据正在发送到图表中。

这是我的html图表组件的外观：

<StackLayout borderRadius="3" minHeight="200">
  <StackLayout *ngIf="chartItems$; else loading">
    <StackLayout *ngIf="hasData; else noData;">
      <GridLayout rows="*">
          <RadCartesianChart row="0">
            <CategoricalAxis
              majorTickInterval="10"
              tkCartesianHorizontalAxis>
            </CategoricalAxis>
            <LinearAxis
              horizontalLocation="Right"
              [maximum]="max"
              [minimum]="min"
              labelLayoutMode="Outer" 
              tkCartesianVerticalAxis>
            </LinearAxis>
            <AreaSeries
              tkCartesianSeries
              seriesName="Area" 
              showLabels="false"
              [items]="chartItems$ | async"
              stackMode="Stack"
              categoryProperty="Date" 
              valueProperty="Amount" 
              selectionMode="None">
            </AreaSeries>
            <RadCartesianChartGrid 
              tkCartesianGrid>
            </RadCartesianChartGrid>
            <Palette tkCartesianPalette seriesName="Area">
              <PaletteEntry
                  tkCartesianPaletteEntry 
                  [strokeColor]="lineColor">
              </PaletteEntry>
              <PaletteEntry 
                  tkCartesianPaletteEntry>
              </PaletteEntry>
            </Palette>
            </RadCartesianChart>
      </GridLayout>
    </StackLayout>
    <ng-template #noData>
      <StackLayout class="center-center" height="100%">
          <Label text="No Chart Data Available" class="font-color textsize-reg-md" textWrap="true"></Label>
      </StackLayout>
    </ng-template>
  </StackLayout>
  <ng-template #loading>
      <ActivityIndicator margin="10" rowSpan="3" color="#ffffff" busy="true"></ActivityIndicator>
  </ng-template>
</StackLayout>

ts文件（在这里缩写）：

SetChartData(chartData: Observable<FinancialChart[]>) {
    **console.log(chartData); // <---- Has correctly formatted data**
    this.chartItems$ = chartData
}

最大的问题是，财务图表和面积图在惰性负载过渡之前都可以工作，但之后再也不能工作（但可以确认组件正在渲染）。

有什么想法吗？

Answer 1

万一其他人遇到这个问题...

答案是移动

import { NativeScriptUIChartModule } from 'nativescript-ui-chart/angular/chart-directives';

进入我用于组件的另一个模块。

最初，该文件位于app.module.ts文件中。

Nativescript延迟加载的页面未加载图表

1 个答案: