html - 在Angular中将数据从父组件传递到子组件时出现HTML错误
问题描述
在这里,我将数据从父母传递给孩子,并尝试使用这些数据绘制图表。这是我在子组件中的图形绘制方法createGraph(divName, chartDataInfo)
。在这里我试图绘制 2 个图表。
export class ViewComponent implements OnInit{
lineChart = ['line_chart1', 'line_chart2', 'line_chart3'];
value = ['33.5M', '67.9M', '90.9M', '09.9M'];
names = ['Bookings', 'Modifications','cancellations', 'Revenue' ];
bookingInfo = [];
mdfInfo = [];
ngOnInit() {
this.getInfo();
this.getBookingInfo();
}
getBookingInfo() {
const params = [];
params.push({code: 'dateType', name: 'BOOKING'});
params.push({code: 'fromDate', name: '2019-01-01'});
params.push({code: 'toDate', name: '2019-12-31'});
this.ServiceHandler.getTxnInfo([], params).subscribe(
bookings => {
this.bookingInfo = bookings.responseObj.txnValues;
console.log(this.bookingInfo);
});
}
getInfo(){
const params = [];
params.push({code: 'fromDate', name: '2019-01-01'});
params.push({code: 'toDate', name: '2019-12-31'});
this.ServiceHandler.getMdfInfo([], params).subscribe(
modifications => {
this.mdfInfo = modifications.responseObj.txnValues;
this.modificationTtcSum = modifications.responseObj.ttcSum;
});
}
}
这是我的dashboard.component.html
<app-chips [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [mdfInfo] = "mdfInfo"></app-summary-chips>
<app-chips [lineChart]="lineChart[1]" [value] = "value[1]" [name] = "names[1]" [bookingInfo] = "bookingInfo"></app-summary-chips>
这是我的子组件。因此,我在this.createGraph(this.lineChart, this.mdfInfo);
里面打了 2 次电话ngOnChanges(changes: SimpleChanges)
。但是当我喜欢这两个图表时,两个图表都没有出现。当我在this.createGraph(this.lineChart, this.mdfInfo)
里面只打一次电话ngOnChanges(changes: SimpleChanges)
,同时我只使用<app-summary-chips>
一次选择器时,一个图表正在绘制。原因是什么?
export class ChipsComponent implements OnInit {
@Input('lineChart') lineChart: string;
@Input('value') value: string;
@Input('name') name: string;
@Input() bookingInfo = [];
@Input() mdfInfo = [];
ngOnChanges(changes: SimpleChanges) {
console.log(this.bookingInfo);
console.log(this.mdfInfo );
this.createGraph(this.lineChart, this.mdfInfo);
this.createGraph(this.lineChart, this.bookingInfo);
}
createGraph(divName, chartDataInfo) {
am4core.useTheme(am4themesAnimated);
const chartNameChartTTV = am4core.create(divName, am4charts.XYChart);
chartNameChartTTV.width = am4core.percent(100);
chartNameChartTTV.height = am4core.percent(100);
console.log(this.bookingInfo);
chartNameChartTTV.padding(0, 0, 0, 0);
chartNameChartTTV.data = [];
for (let i = 0; i < chartDataInfo.length; i++) {
const booking = chartDataInfo[i];
console.log(booking);
chartNameChartTTV.data.push({date: booking.time, value: booking.ttc});
}
chartNameChartTTV.colors.list = [
am4core.color('rgba(4, 69, 142, 1)'),
];
// Create axes
const dateAxis = chartNameChartTTV.xAxes.push(new am4charts.DateAxis());
const valueAxis = chartNameChartTTV.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.labels.template.disabled = true;
// Create series
const series = chartNameChartTTV.series.push(new am4charts.LineSeries());
series.dataFields.valueY = 'value';
series.dataFields.dateX = 'date';
series.tooltipText = '{value';
series.fillOpacity = 1;
series.strokeWidth = 2;
series.minBulletDistance = 15;
}
}
这是我的chips.component.html
<div class="l-content-wrapper c-summary-chip oh" >
<div class="c-summary-chip__value">{{value}}</div>
<div class="c-summary-chip__txt">{{name}}</div>
<div id= "{{lineChart}}" class="c-summary-chip__graph ">
</div>
</div>
解决方案
尝试将代码包装在 if 检查中
createGraph(divName, chartDataInfo) {
if (divName && chartDataInfo.length) {}
}
由于 ngOnChanges 是一个异步事件,因此无法保证当您在更改中调用该函数时,所有参数都会出现。
也为了调试给 console.log 像这样。
createGraph(divName, chartDataInfo) {
console.log(divName, chartDataInfo);
if (divName && chartDataInfo) {}
}
这样,您可以在调用该函数时确认所有必需的数据都在那里。
推荐阅读
- python - 如何在 Python 中格式化由宽度而不是精度分隔的浮点数?
- asp.net-core-mvc - 使用 IEnumerable 模型渲染 PartialView 很慢
- python - 使用 Python 从 API 调用一系列日期
- mysql - Django:无法将字段添加到自定义用户模型
- identityserver4 - 为什么 Identity Server GetLogoutContextAsync() 方法总是为 PostLogoutRedirectUri 返回 null?
- bash - 删除 bash 中的名称中间
- python - 字典中的加法/列表
- django - Django原子事务实际上不是原子的?
- sql - 使用 SQL 和 R 从 power BI pbix 文件中提取数据
- sql-server - 无法通过查询选择表,即使它完全可用