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

Posted 2023-03-21

【中文标题】如何在 ng-bootstrap 轮播中用 div 替换图像？

【英文标题】：How to replace images with divs in ng-bootstrap carousel?

【发布时间】：2021-12-19 19:47:58

【问题描述】：

我在 Angular 中使用 ng-bootstrap。我也在使用chart.js。我已经构建了两个使用数据实时更新的图表。我想在轮播中展示这些图表，允许用户滑动查看每个图表。我正在尝试使用ng-bootstrap 提供的carousel 指令，但我似乎无法弄清楚如何将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"  />
    </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>

【参考方案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

【讨论】：

啊，谢谢！我认为我错过了ngbSlide 部分。早些时候我这样做时只是得到一个空白屏幕。