要解决Angular 6服务数据不填充ngx图表的问题,可以按照以下步骤进行操作:
import { Component, OnInit } from '@angular/core';
import { DataService } from 'your-data-service';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
})
export class ChartComponent implements OnInit {
chartData: any[];
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.chartData = data;
});
}
}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
getData(): Observable {
return this.http.get('your-api-endpoint');
}
}
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { DataService } from 'your-data-service';
import { ChartComponent } from './chart.component';
@NgModule({
imports: [
HttpClientModule
],
declarations: [
ChartComponent
],
providers: [
DataService
]
})
export class ChartModule { }
通过以上步骤,应该能够成功获取数据并将其填充到ngx图表中。请根据实际情况进行适当的修改和调整。
上一篇:Angular 6服务工作者正在缓存font-awesome图标,在离线模式下无法获取。
下一篇:Angular 6服务在单元测试中无法通过(NullInjectorError:没有HttpClient的提供者!)