Angular2 - 显示图表

Question

在我的angular2应用程序中，我使用zingchart显示多个图表。 在我看到的所有例子中，这就是他们显示图表的方式：

<code>
 <zingchart *ngFor="let chart of charts" [chart]="chart"></zingchart>
</code>

但如果我想分别显示每个图表怎么办？我想在第一张图表和第二张图表之间放一个按钮。我怎样才能做到这一点？ 我需要类似的东西：

<code>
<zingchart  [chart]="charts[0]"></zingchart>
</code>

提前感谢。

Answer 1

你可以做这样的事情，所以对于图表中的每个图表，显示图表和相应的按钮，所有这些都很好地包裹在一个div中用于造型。

<div *ngFor="let chart of charts">
   <zingchart [chart]="chart"></zingchart>
   <button type="button">Click Me!</button>
</div>

您甚至可以将每个图表包装为一个包含一个区域中所有必要项目的自定义组件。

父组件

<div *ngFor="let chart of charts">
    <customcomponent [chart]="chart"></customcomponent>
</div>

子组件

<zingchart [chart]="chart"></zingchart>
<button type="button">Click Me!</button>

希望有所帮助。