[英]How to pass async data to child components in an object (Angular6)
我正在尝试显示从服务器检索的数据(使用Angular 6,Rxjs和Chartjs),并使用数据呈现图表。 如果我使用本地模拟数据,一切都很好。 但是,如果我使用从服务器获取数据,则无法呈现图形所需的数据,因此图表将呈现为空白图表。
简介:组件进行服务调用,并使用服务调用的响应准备对象以传递给子组件。 但是,在响应准备就绪时,已经发送了没有必要信息的对象。
服务代码段 :
getAccountsOfClientId(clientID: string): Observable<Account[]> {
return this.http.get<Account[]>(`${this.BASE_URL}/accounts?client=${clientID}`)
.pipe(
tap(accounts => console.log('fetched client\'s accounts')),
catchError(this.handleError('getAccountsOfClientId', []))
);
}
在client-info.component.ts (进行服务调用的组件,并准备并将对象传递给子组件)
@Input() client; // received from another component, data is filled
constructor(private clientAccountService: ClientAccountService) { }
ngOnInit() {
this.getAccountsOfClientId(this.client.id);
}
ngAfterViewInit() {
this.updateChart(); // render for pie chart
this.updateBarChart(); // render for bar chart
}
getAccountsOfClientId(clientID: string): void {
this.clientAccountService.getAccountsOfClientId(this.client.id)
.subscribe(accounts => this.clientAccounts = accounts);
}
updateBarChart(updatedOption?: any): void {
/* unrelated operations above ... */
// Create new base bar chart object
this.barChart = {};
this.barChart.type = 'bar';
this.setBarChartData();
this.setBarChartOptions('Account', 'Balance');
}
setBarChartData(): void {
// field declarations..
console.log('clientAccounts has length: ' + this.clientAccounts.length); // prints 0
this.clientAccounts.map((account, index) => {
// do stuff
});
dataset = {
label: 'Balance',
data: data,
...
};
datasets.push(dataset);
// since clientAccounts was empty at the time this function ran, the "dataset" object doesn't contain
// the necessary information for the chart to render
this.barChart.data = {
labels: labels,
datasets: datasets
};
}
我在寻找使用ngOnChanges(在子组件)的变化,但是图表数据是不是在子组件更新“clientAccounts”阵列充满响应之后。
@Input() chart: Chart;
@Input() canvasID: string;
@Input() accountBalanceStatus: string;
ngOnChanges(changes: SimpleChanges) {
if (changes['accountBalanceStatus'] || changes['chart']) {
this.renderChart();
}
}
renderChart(): void {
const element = this.el.nativeElement.querySelector(`#${this.canvasID}`);
if (element) {
const context = element.getContext('2d');
if (this.activeChart !== null) {
this.activeChart.destroy();
}
this.activeChart = new Chart(context, {
type: this.chart.type,
data: this.chart.data,
options: this.chart.options
});
} else {
console.log('*** Not rendering bar chart yet ***');
}
}
你能指点我应该如何继续我的研究吗?
抱歉,这个问题很长,谢谢!
编辑 :根据要求,模板如下
父(客户信息) :
<div class='client-info-container'>
<div class='info-container'>
<li>Date of Birth: {{ client.birthday | date: 'dd/MM/yyyy' }}</li>
<li>Name: {{ client.name }}</li>
<li>First Name: {{ client.firstname }}</li>
</div>
<div class='more-button'>
<button (click)='openModal()'>More</button>
</div>
<div class='chart-container'>
<div *ngIf='pieChart && client'>
<app-balance-pie-chart
[chart]='pieChart'
[canvasID]='accountBalancePieChartCanvasID'
(updateChart)='handlePieChartOnClick($event)'>
</app-balance-pie-chart>
</div>
<div class='bar-chart-container'>
<div class='checkbox-container'>
<div *ngFor='let option of cardTypeCheckboxOptions' class='checkbox-item'>
<input
type='checkbox'
name='cardTypeCheckboxOptions'
value='{{option.value}}'
[checked]='option.checked'
[(ngModel)]='option.checked'
(change)="updateCardTypeCheckboxSelection(option, $event)"/>
<p>{{ option.name }} {{ option.checked }}</p>
</div>
</div>
<div *ngIf='barChart && client'>
<!-- *ngIf='client.accounts.length === 0' -->
<div class="warning-text">This client does not have any accounts.</div>
<!-- *ngIf='client.accounts.length > 0' -->
<div>
<app-balance-account-bar-chart
[chart]='barChart'
[canvasID]='accountBarChartCanvasID'
[accountBalanceStatus]='accountBalanceStatus'>
</app-balance-account-bar-chart>
</div>
</div>
</div>
</div>
</div>
图表:
<div class='bar-chart-canvas-container' *ngIf='chart'>
<canvas id='{{canvasID}}' #{{canvasID}}></canvas>
</div>
我看到了,你没有直接将数据分配给this.barChart
而是将它指定为this.barChart.data
,这意味着你要直接修改属性,这可能不会调用子组件的ngOnChanges
。 这是由于您在评论中给出的解释。
我读到这可能是因为角度变化检测通过查看对象引用来检查差异
并且它不会知道对象的属性何时被改变
绑定到@Input()
属性的变量是this.barChart
而不是this.barChart.data
。
代替
this.barChart.data = {
labels: labels,
datasets: datasets
};
你试试这个
this.barChart = {
data : {
labels: labels,
datasets: datasets
}};
在这里你直接修改this.barChart
应该触发ngOnChanges()
。
编辑:
你应该调用this.updateChart();
里面的subscribe
块
this.clientAccountService.getAccountsOfClientId(this.client.id)
.subscribe((accounts) => {
this.clientAccounts = accounts;
this.updateChart();
})
这就是为什么你也将this.clientAccounts.length
设为0
ngOnChanges(changes: SimpleChanges) { if (changes['accountBalanceStatus'] || changes['chart']) { this.renderChart(); } }
ngOnChanges的参数值是每个Input()
prop的SimpleChanges的类型:
class SimpleChange {
constructor(previousValue: any, currentValue: any, firstChange: boolean)
previousValue: any
currentValue: any
firstChange: boolean
isFirstChange(): boolean
}
您应该通过previousValue
, currentValue
检查数据。 就像是:
if(changes.accountBalanceStatus.previousValue != changes.accountBalanceStatus.currentValue
|| changes.chart.previousValue != changes.chart.currentValue){
this.renderChart();
}
您需要与来自父级的子组件进行交互,以便使用输入绑定。
参考:
https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding
我的问题已经解决,我想分享解决方案以防将来有人需要它。 正如Amit Chigadani建议的那样(在评论中),在订阅块中调用我的图表更新功能。
getAccountsOfClientId(clientID: string): void {
this.clientAccountService.getAccountsOfClientId(this.client.id)
.subscribe(accounts => {
this.clientAccounts = accounts;
this.updateChart();
this.updateBarChart();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.