Angular 14中从Service获取数据后大图表无法显示的问题

问题概述 #

在Angular 14项目中，从服务获取数据后，卡片组件能正常渲染数据，但app-widget-area组件的大图表无数据展示。推测可能和组件数据处理逻辑或参数传递有关。

相关代码片段 #

1. Dashboard组件代码 #

import { Component, OnInit } from '@angular/core';
import { DashboardService } from '../dashboard.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit {
  bigchart !: any[];
  cards !: any[];
  
  constructor(private dashboardService: DashboardService) { }

  ngOnInit() {
    this.bigchart = this.dashboardService.bigchart();
    this.cards = this.dashboardService.cards();
  }
}

2. Dashboard服务代码 #

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DashboardService {

  constructor() { }
  bigchart() {
    return [{ 
      name: 'Current',
      data: [0.54, 0.53, 0.57, 0.64, 0.57, 0.48]
    }, {
      name: 'Voltage',
      data: [133.36, 134.15, 132.43, 131.15, 135.17, 133.21]
    }, {
      name: 'Motor Speed',
      data: [15, 16, 17, 12, 15, 19]
    }];
  }
  cards() {
    return [15, 16, 17, 12];
  }
}

3. Dashboard模板代码 #

<div>
   <app-widget-area  [name]="bigchart" [data]="bigchart"></app-widget-area>
</div>
<br>
<mat-divider></mat-divider>
<br>
<div fxLayout="row" fxLayoutAllign="space-between center" fxLayoutGap="20px" class="stats-cards">
    <mat-card fxFlex="25">
        <app-widget-card label="Current Num"  total="16k" percentage="75" [data]="cards"></app-widget-card>
    </mat-card>
    <mat-card fxFlex="25">
        <app-widget-card label="Current Num"  total="16k" percentage="75" [data]="cards"></app-widget-card>
    </mat-card>
    <mat-card fxFlex="25">
        <app-widget-card label="Current Num"  total="16k" percentage="75" [data]="cards"></app-widget-card>
    </mat-card>
    <mat-card fxFlex="25">
        <app-widget-card label="Current Num"  total="16k" percentage="75" [data]="cards"></app-widget-card>
    </mat-card>
</div>
<br>

4. app-widget-area组件Input声明 #

@Input() data!: any[];

解决方案 #

1. 修正模板参数传递错误 #

当前模板中[name]="bigchart"绑定的是数组，不符合name属性的预期（应为字符串标题），这会导致组件内部逻辑异常，修正如下：

<app-widget-area [name]="'设备监控数据'" [data]="bigchart"></app-widget-area>

2. 验证数据接收状态 #

在app-widget-area组件的生命周期钩子中添加日志，确认数据是否成功传递：

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-widget-area',
  templateUrl: './widget-area.component.html',
  styleUrls: ['./widget-area.component.css']
})
export class WidgetAreaComponent implements OnInit {
  @Input() data!: any[];
  @Input() name!: string;

  ngOnInit(): void {
    console.log('接收的图表数据:', this.data);
    console.log('图表名称:', this.name);
  }
}

查看浏览器控制台，确认数据是否正常输出。

3. 规范数据类型（可选但推荐） #

定义明确的TypeScript接口替代any[]，提升代码可维护性：

// 新建chart-series.ts文件
export interface ChartSeries {
  name: string;
  data: number[];
}

// 修改DashboardComponent类型
import { ChartSeries } from './chart-series';
bigchart!: ChartSeries[];

// 修改app-widget-area的Input类型
import { ChartSeries } from '../chart-series';
@Input() data!: ChartSeries[];

4. 检查图表组件数据处理逻辑 #

如果app-widget-area使用第三方图表库（如ECharts、ng2-charts），需确认数据格式是否匹配库的要求：

• 例如ng2-charts折线图需要{ labels: string[], datasets: { label: string, data: number[] }[] }格式
• ECharts的series配置刚好匹配当前数据结构，但需确认组件是否正确配置了图表选项

5. 确保数据变化时更新图表 #

使用ngOnChanges钩子监听数据变化，在数据更新时重新渲染图表：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

export class WidgetAreaComponent implements OnChanges {
  @Input() data!: any[];

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['data'] && changes['data'].currentValue) {
      this.renderChart(changes['data'].currentValue);
    }
  }

  private renderChart(data: any[]): void {
    // 图表渲染逻辑
  }
}

内容的提问来源于stack exchange，提问作者Tín Trương Trí