如何在下拉菜单单击时显示带有 Angular 2 的 ng2-chart？

Question

我想要在用户按下按钮时在页面上显示一个图表。我想把这个 html 写成 innerHTML:

<div style="display: block">
<canvas baseChart
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [chartType]="barChartType"
      [legend]="barChartLegend"></canvas>
</div>

我试过像这样复制它但是图表没有显示操作。我认为它没有很好地读取属性。

document.getElementById("info").innerHTML = " <div style=\"display: block\">\n" +
  "  <canvas baseChart\n" +
  "          [datasets]=\"barChartData\"\n" +
  "          [labels]=\"barChartLabels\"\n" +
  "          [options]=\"barChartOptions\"\n" +
  "          [chartType]=\"barChartType\"\n" +
  "          [legend]=\"barChartLegend\"></canvas>\n" +
  "</div>  some text <br>\n" +
  "  some more text: <strong> "+ this.item + "</strong><br>\n" +
  "\n" +
  "  some more text:  <br>\n" +
  "  Monday: <strong> " + this.percentMonday + "%</strong>  <br>\n"

然而，当我将其放入 html 文件时，它会正确显示。我怎样才能做到这一点？提前致谢

   div class="dropdown" dropdown [dropdownToggle]="false">
  <button class="btn btn-primary" dropdown-open>Kies een stad voor meer info</button>
  <ul class="dropdown-menu">

    <li value="Amsterdam" (click)="goToAmsterdam()"><a>Amsterdam</a></li>



  </ul>

</div>

Answer 1

这很容易，如果您不必使用 innerHTML：首先，如果您使用 Angular(2)，请不要使用原生 JavaScript。其次，只需将此行添加到您的代码中。

对应Controller中的JS：

//...
export class YOURCOMPONENT implements OnInit {
  showChart: boolean; // store toggle state of the chart

  constructor () { }

  ngOnInit(): void {
    this.showChart = false; // hide chart at the beginning
  }
}

HTML:

<div *ngIf="showChart">
    <canvas baseChart
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [chartType]="barChartType"
      [legend]="barChartLegend"></canvas>
</div>
<button (click)="showChart=!showChart">Toggle Chart</button>

(click)="showChart=!showChart" 表示单击按钮时 showChart 的值将从 true 切换为 false，反之亦然。

如何在下拉菜单单击时显示带有 Angular 2 的 ng2-chart？

How to display a ng2-chart with Angular 2 on dropdown menu click?

javascript

document

innerhtml

ng2-charts

angular