Nativescript Lazy Loaded Page не загружает графики - PullRequest
Новая
       21

Nativescript Lazy Loaded Page не загружает графики

0 голосов
/ 08 июля 2019

До того, как я внедрил «Ленивую загрузку» в свое угловое приложение Nativescript, финансовые и территориальные диаграммы не будут иметь проблем с загрузкой данных.

После реализации я заметил, что диаграмма будет загружаться, но я получу следующее сообщение, чтона 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
}

Большая проблема заключается в том, что и финансовый график, и график области работали до перехода с отложенной загрузкой, нобольше не работает (но может подтвердить, что компонент визуализируется) впоследствии.

Есть идеи?

1 Ответ

0 голосов
/ 08 июля 2019

В случае, если кто-то еще столкнется с этим ...

Ответ должен был переместить 

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

в другой модуль, который я использовал для компонентов.

Первоначально,это было внутри app.module.ts файла.

...