Angular - 如何使用 ngOnChanges 加载数据

Question

我有一个demo here

这是一个 angular 应用程序，我正在尝试创建 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 参数更改有效。在您的情况下，您只是从组件本身更改组件的值。

Take a look at this demo。我对您的演示代码进行了一些代码更改，它似乎在做与您期望的相同的事情。

您可以将图形创建逻辑放在 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);
    }
  }