Angular 7 - 正确地将数据传递给子组件

Question

我正在尝试使用 for 循环生成 3 个 Google 图表。每个 Google 图表都应在饼图中显示不同的数据。

为此，我将 Google Chart 嵌入到一个子组件中，该子组件从父组件获取一些输入变量并呈现图表。

我注意到所有 3 个图表都只显示最后传递的数据，而不是为每组数据显示不同的图表。我在这里做错了什么？

Stackblitz

app.component.html

<div *ngFor="let result of results; index as i;">
    <app-google-chart #chart{{i}} 
    [title]="title"
    [type]="type"
    [data]="data"
    [columnNames]="columnNames"
    [options]="options"
    [width]="width"
    [height]="height">

    </app-google-chart>
</div>

app.component.ts

export class AppComponent implements OnInit {

  constructor() {}

  results = ["1","2","3"];

  title;
  type;
  data;
  columnNames;
  options;
  width;
  height;

  ngOnInit() {

    for(let i=0;i<this.results.length;i++)
    {
      this.drawChart(i);
    }
  }

  drawChart(index:any) {
    var passed;
    var failed;

   if(index == 0) 
    {
      passed=50;
      failed=50;
    }
    else if(index == 1) 
    {
      passed=20;
      failed=30;
    }
    else if(index == 2) 
    {
      passed=40;
      failed=60;
    }
    this.title = "Chart" + index;
    this.type = "PieChart";
    this.data = [['Pass', passed], ['Fail', failed]];

  }
}

Answer 1

根据您的app.component.ts，您正在使用不同的值调用相同的函数drawChart(index) 来替换相同的值。

所以唯一的最后一次迭代存在。 看一下这个 STACKBLITZ

希望这会有所帮助:)

Answer 2

您可以将属性推送到 results 数组并在 html 中使用它的属性，而不是更新相同的变量

<div *ngFor="let result of results; index as i;">
    <app-google-chart #chart{{i}} 
    [title]="result.title"
    [type]="result.type"
    [data]="result.data"
    [columnNames]="columnNames"
    [options]="options"
    [width]="width"
    [height]="height">

    </app-google-chart>
</div>

export class AppComponent implements OnInit {

  // or a different set of data to be looped through in OnInit
  dataLength = 3;

  // data to be passed to children component
  results = [];

  ngOnInit() {
    for(let i = 0;i < dataLength; i++) {
      this.results.push(this.drawChart(i));
    }
  }

  drawChart(index:any) {
    var passed;
    var failed;

   if(index == 0) {
      passed=50;
      failed=50;
    } else if(index == 1) {
      passed=20;
      failed=30;
    } else if(index == 2) {
      passed=40;
      failed=60;
    }

    // instead of this
    this.title = "Chart" + index;
    this.type = "PieChart";
    this.data = [['Pass', passed], ['Fail', failed]];

    return { 
       title: 'Chart' + index,
       type: 'PieChart',
       data: [['Pass', passed], ['Fail', failed]]
    };
  }
}