如何在 ng-bootstrap 轮播中用 div 替换图像？

Question

我正在使用 ng-bootstrap 和 Angular。我也在使用 chart.js。我已经构建了两个实时更新数据的图表。我想在轮播中展示这些图表，允许用户滑动以查看每个图表。我正在尝试使用 ng-bootstrap 提供的 carousel 指令，但我似乎无法弄清楚如何用我拥有的两个 divs 替换 img 指令包裹图表画布。

这是我要复制的示例，来自：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>

Answer 1

您可以只删除图片内容并使用 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

如何在 ng-bootstrap 轮播中用 div 替换图像？

How to replace images with divs in ng-bootstrap carousel?

angular

bootstrap-4

carousel

ng-bootstrap