html - 以角度将数据从父组件传递到子组件
问题描述
在这里,我想将this.formattedBookingPrice, this.formattedCheckingPrice
值放入value
数组并将它们传递给子组件而不是静态值。但是由于它是在subscribe
方法内部,我无法访问它们。我能得到解决方案吗?
这是我的父组件。
export class DashboardComponent implements OnInit{
lineChart = ['line_chart1', 'line_chart2', 'line_chart3', 'line_chart4', 'line_chart5'];
value = [ this.formattedBookingPrice, this.formattedCheckingPrice, '09.9M'];
names = [ 'Bookings', 'Checkins', 'Modifications', 'Revenue' ];
numberUtil = new NumberUtil();
bookingInfo = [];
checkingInfo = [];
ngOnInit() {
this.getBookingInfo();
this.getCheckingInfo();
}
getBookingInfo() {
this.getTxnInfo('BOOKING').subscribe(
bookings => {
this.bookingInfo = bookings.responseObj.txnValues;
this.bookingTtcSum = checkings.responseObj.ttcSum;
this.formattedBookingPrice = numberUtil.formatPriceDefault(this.bookingTtcSum, ' M ').substring(2);
console.log(this.bookingInfo);
});
}
getCheckingInfo() {
this.getTxnInfo('CHECKIN').subscribe(
checkings => {
this.checkingInfo = checkings.responseObj.txnValues;
this.checkingTtcSum = checkings.responseObj.ttcSum;
this.formattedCheckingPrice = this.numberUtil.formatPriceDefault(this.checkingTtcSum, ' M ').substring(2);
});
}
}
这是html。
<app-chips [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [bookingInfo] = "bookingInfo"></app-chips>
<app-chips [lineChart]="lineChart[1]" [value] = "value[1]" [name] = "names[1]" [checkingInfo] = "checkingInfo"></app-chips>
这是我的子组件。
export class ChipsComponent implements OnInit, OnChanges {
@Input('lineChart') lineChart: string;
@Input('value') value: string;
@Input('name') name: string;
@Input() bookingInfo = [];
@Input() checkingInfo = [];
}
这是子组件 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>
解决方案
在订阅和实现中重新分配值数组changeDetectionStrategy
(分配后调用this.ref.detectChanges()
)现在签入ngOnChanges()
子组件的方法
检查以下示例
https://www.digitalocean.com/community/tutorials/angular-change-detection-strategy
它通过详细信息和代码示例解释了您的要求
推荐阅读
- bash - Bash和关联数组中的替换
- sql - Oracle Apex 日历显示列
- python - 如何解决错误:安装 wordcloud 库时出现“命令错误,退出状态为 1:”
- java - Akka 经典 - 发送自定义类消息类型
- javascript - 在达到分数并再次单击按钮之前,按钮不会禁用
- javascript - Windows服务器上节点js https的问题
- javascript - 在 ReactJs 的数组中推送多个复选框数据?
- reactjs - 在 react js 中向 useEffect 方法添加功能组件
- python - 如何将输入转换为python中的列表
- r - 如何在对数刻度图中沿 abline 放置文本?