Question

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

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

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

app.component.html

m_sInput

app.component.ts

<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>

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

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

2 个答案: