如何在下拉菜单单击时显示带有 Angular 2 的 ng2 图表

Question

我希望如果用户按下按钮，则在页面上显示操作的图表。我想把这个html写进innerHTML：

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

我试图像这样复制它，但图表没有显示 op。我认为它不能很好地读取属性。

document.getElementById("info").innerHTML = " <div style="display: block">n" +
  "  <canvas baseChartn" +
  "          [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。其次，只需将此行添加到您的代码中即可。

相应控制器中的 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，反之亦然。