Что ж, я создал функцию внутри файла component.ts, который помещается внутри конструктора:
constructor(private _visitService: VisitService,) {
this._visitService.getchartData().subscribe(data => {
this.fetchedData = data
console.info("INSIDE SUBSCRIBE", this.fetchedData );
});
}
Это нормально, когда данные должны использоваться в фигурных скобках подписки {}, как это сделал console.info. но когда я помещаю его в функцию снаружи, например:
constructor(
private _visitService: VisitService,
)
{
this.chartData = this.getData( );
this._visitService.getchartData().subscribe(data =>
{ this.fetchedData = data
console.info("INSIDE SUBSCRIBE", this.fetchedData );
});
}
ngOnInit() {
}
getData( ) {
console.info("INSIDE SUBSCRIBE", this.fetchedData );
var layoutColors = this._baConfig.get().colors;
var graphColor = this._baConfig.get().colors.custom.dashboardLineChart;
return {
dataProvider: [
{
date: "2012-07-30",
value:50
}, {
date: "2012-07-31",
value: 18
}, {
date: "2012-08-01",
value: 13
}, {
date: "2012-08-02",
value: 22
}, {
date: "2012-08-03",
value: 23
},
],
type: 'serial',
theme: 'blur',
marginTop: 15,
marginRight: 15,
responsive: {
'enabled': true
},
dataDateFormat: 'YYYY-MM-DD',
categoryField: 'date',
categoryAxis: {
parseDates: true,
gridAlpha: 0,
minHorizontalGap:100,
color: layoutColors.defaultText,
axisColor: layoutColors.defaultText
},
valueAxes: [
{
minVerticalGap: 50,
gridAlpha: 0,
color: layoutColors.defaultText,
axisColor: layoutColors.defaultText
}
],
graphs: [
/* {
id: 'g0',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: colorHelper.hexToRgbA(graphColor, 0.3),
lineThickness: 1,
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value0',
fillAlphas: 1,
fillColorsField: 'lineColor'
},*/
{
id: 'g1',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: colorHelper.hexToRgbA(graphColor, 0.5),
lineThickness: 1,
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value',
fillAlphas: 1,
fillColorsField: 'lineColor'
}
],
chartCursor: {
categoryBalloonDateFormat: 'DD MM YYYY',
categoryBalloonColor: '#4285F4',
categoryBalloonAlpha: 0.7,
cursorAlpha: 0,
valueLineEnabled: true,
valueLineBalloonEnabled: true,
valueLineAlpha: 0.5
},
export: {
enabled: true
},
pathToImages: "http://cdn.amcharts.com/lib/3/images/",
chartScrollbar: {
graph: 'g1',
gridAlpha:0,
color:"#888888",
scrollbarHeight:25,
backgroundAlpha:0,
selectedBackgroundAlpha:0.1,
selectedBackgroundColor:"#888888",
graphFillAlpha:0,
autoGridCount:true,
selectedGraphFillAlpha:0,
graphLineAlpha:0.2,
graphLineColor:"#c2c2c2",
selectedGraphLineColor:"#888888",
selectedGraphLineAlpha:1
},
listeners: [{
method: function(e) {
e.chart.valueAxes[0].zoomToValues(30, 70);
}
}],
creditsPosition: 'bottom-right',
zoomOutButton: {
backgroundColor: '#fff',
backgroundAlpha: 0
},
zoomOutText: '',
/* pathToImages: layoutPaths.images.amChart*/
};
}
Он отображается как неопределенный. Есть ли способ использовать значение, извлеченное из подписки, внутри других функций или методов. Я действительно новичок в этом, поэтому у меня проблемы. Я также пытался передать его другой переменной и использовать эту переменную для доступа к данным, но это тоже было напрасно.
вызвать getData перед подпиской или внутри подписки? Функция getData используется поверх `this.chartData = this.getData (); `который далее помещается в html` <ba-am-chart baAmChartClass = "dashboard-line-chart" [baAmChartConfiguration] = "chartData" (onChartReady) = "initChart ($ event)"> </ ba-am-chart > `.
Не могли бы вы изменить OP, включив в него полный HTML-файл?
ну вот и весь HTML. Это дочернее представление, состоящее только из диаграммы, которая затем объединяется с основными заголовками и всем остальным.
Где эта линия? this.chartData = this.getData( )
Мне очень жаль, что я допустил ошибку в коде. Я исправил это прямо сейчас, он находится внутри конструктора.





Добавьте * ngIf = "chartData" во внешнюю оболочку, чтобы диаграмма отображалась, как только данные станут доступны.
<div *ngIf = "chartData">
Chart Data content goest here.
<h1>{{ chartData.property }}</h1>
</div>
Скорее всего, вы вызываете
getData()до того, как сработает подписка, где вызывается эта функция?