我正在使用ng-bootstrapAngular。我也在使用chart.js. 我已經構建了兩個使用資料實時更新的圖表。我想在輪播中展示這些圖表，允許用戶滑動查看每個圖表。我正在嘗試使用carousel提供的指令，ng-bootstrap但我似乎無法弄清楚如何用我img擁有的兩個divs包裝圖表畫布的指令替換該指令。
這是我試圖復制的一個例子，來自：StackBlitz Example
<ngb-carousel #carousel [interval]="50000">
<ng-template ngbSlide *ngFor="let img of images; index as i">
<div class="picsum-img-wrapper">
<img [src]="img" alt="My image {{i 1}} description" />
</div>
</ng-template>
</ngb-carousel>
我不想在影像之間回圈，而是div在兩個圖表之間回圈。有沒有辦法實作這一目標？
這是我目前擁有的兩個圖表的 HTML 代碼：
<!-- Chart 1 -->
<div>
<div id = "crowOnPerchChart">
<canvas baseChart
[datasets]="crowOnPerchChartData"
[labels]="crowOnPerchChartLabels"
[options]="crowOnPerchChartOptions"
[legend]="crowOnPerchChartLegend"
[chartType]="crowOnPerchChartType"
>
</canvas>
</div>
</div>
<!-- Chart 2 -->
<div>
<div id = "coinsDepositedChart">
<canvas baseChart
[datasets]="coinsDepositedChartData"
[labels]="coinsDepositedChartLabels"
[options]="coinsDepositedChartOptions"
[legend]="coinsDepositedChartLegend"
[chartType]="coinsDepositedChartType"
>
</canvas>
</div>
</div>
uj5u.com熱心網友回復：
例如，您可以洗掉影像內容并使用 div 內容
<ngb-carousel *ngIf="showCarousel" #carousel [interval]="5000">
<ng-template ngbSlide>
<div style="background-color: black; height: 200px">
<h1>Graph 1</h1>
</div>
</ng-template>
<ng-template ngbSlide>
<div style="background-color: black; height: 200px">
<h1>Graph 2</h1>
</div>
</ng-template>
</ngb-carousel>請在此處找到代碼示例https://stackblitz.com/edit/angular-uz29lk?file=src/app/carousel-basic.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/352521.html
標籤：有角的 bootstrap-4 旋转木马 ng-bootstrap