如何在bootstrap 4 carousel上执行Angular *ngFor

在Bootstrap 4轮播（carousel）上执行Angular *ngFor，您可以按照以下步骤进行操作：

npm install bootstrap

"styles": [

 "node_modules/bootstrap/dist/css/bootstrap.min.css",

 "src/styles.css"

"scripts": [

 "node_modules/jquery/dist/jquery.min.js",

 "node_modules/bootstrap/dist/js/bootstrap.min.js"

]

 <ol class="carousel-indicators">

   <li *ngFor="let item of carouselItems; let i = index" [class.active]="i === 0" data-target="#myCarousel" [attr.data-slide-to]="i"></li>

 </ol>

 <div class="carousel-inner">

   <div *ngFor="let item of carouselItems; let i = index" [class.active]="i === 0" class="carousel-item">

     <img [src]="item.imageUrl" class="d-block w-100" alt="Slide">

     <div class="carousel-caption">

       <h3>{{ item.title }}</h3>

       <p>{{ item.description }}</p>

     </div>

   </div>

 </div>

 <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">

   <span class="carousel-control-prev-icon" aria-hidden="true"></span>

   <span class="sr-only">Previous</span>

 </a>

 <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">

   <span class="carousel-control-next-icon" aria-hidden="true"></span>

   <span class="sr-only">Next</span>

 </a>

</div>

在上述示例中，我们使用了一个名为"carouselItems"的数组来存储轮播项的数据。您可以在组件类中定义和初始化此数组。

export class CarouselComponent implements OnInit {

 carouselItems: any[] = [

     imageUrl: 'https://example.com/slide1.jpg',

     title: 'Slide 1',

     description: 'This is the first slide'

},

     imageUrl: 'https://example.com/slide2.jpg',

     title: 'Slide 2',

     description: 'This is the second slide'

},

   // Add more carousel items as needed

];

 constructor() { }

 ngOnInit() {

}

在上述示例中，我们提供了两个轮播项，每个轮播项都包含一个图片URL、标题和描述。您可以根据需要添加更多的轮播项。

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { CarouselComponent } from './carousel.component';

@NgModule({

 declarations: [CarouselComponent],

 exports: [CarouselComponent],

 imports: [CommonModule]

})

export class CarouselModule { }

现在，您可以在其他组件中使用CarouselComponent，并通过填充carouselItems数组来动态渲染轮播项。

这是在Bootstrap 4轮播上执行Angular *ngFor的基本步骤。请注意，这只是一个示例，您可以根据自己的需求进行修改和扩展。如果您想了解更多关于Bootstrap 4轮播和Angular的信息，可以参考腾讯云的相关产品和文档：

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云