如何在下拉菜單上單擊Angular 2顯示ng2-chart？

Question

我希望如果用戶按下一個按鈕，則圖表將在頁面上顯示op。 我想將此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 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。 其次，只需將此行添加到您的代碼中。

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