Angular语言 - 如何使用ngOnChanges加载数据

Question

我这里有一个演示

这是一个角度应用程序，我正在尝试在其中创建 D3 图表。

图表数据是使用 createDate 函数创建的，可创建随机数据和日期。

我希望图表使用更新按钮进行更新，所以我使用的是ngOnChanges，但这不会在页面加载时创建图表。

ngOnInit 注释掉的页面加载时加载图表。

ngOnChanges(changes: SimpleChanges) {
if(!changes.data) return;
if(this.hasPreviousData){
this.createData()
this.stack = d3.stack()
.keys(['data_1', 'data_2', 'data_3', 'data_4'])
this.createStack(this.testData);
}else{
this.createData()
this.stack = d3.stack()
.keys(['data_1', 'data_2', 'data_3', 'data_4'])
this.initScales();
this.initSvg();
this.drawAxis();
this.createStack(this.testData);
this.hasPreviousData = true;
}
}

Answer 1

ngOnChanges不起作用的原因是因为它适用于@Input参数更改。在您的情况下，您只需从组件本身更改组件的值。

看看这个演示。我已经在您的演示代码中进行了一些代码更改，它似乎正在做您所期望的相同的事情。

您可以将图形创建逻辑放在createData()本身中，其余部分将进行处理：

createData() {
this.testData = [];
this.years = Math.floor(Math.random() * this.dates.length)
console.log(this.years)
for(let i:number= 0; i<=this.years; i++){
this.testData[i] = {
data_1: Math.floor(Math.random() * (this.max - this.min)),
data_2: Math.floor(Math.random() * (this.max - this.min)),
data_3: Math.floor(Math.random() * (this.max - this.min)),
data_4: Math.floor(Math.random() * (this.max - this.min)),
date: this.dates[i]
}
}    
this.stack = d3.stack()
.keys(['data_1', 'data_2', 'data_3', 'data_4']);
if(this.hasPreviousData){
this.createStack(this.testData);
}else{
this.hasPreviousData = true;
this.initScales();
this.initSvg();
this.drawAxis();
this.createStack(this.testData);
}
}