如何用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()本身中，然后处理rest：

  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);
    }
  }