ng-bootstrap - 将 NgbCarousel 与 ngFor 一起使用时模板解析错误

Question

我想将 ngb-carousel 与 ngFor 一起使用，我的代码如下：

但这会产生如下错误：

<ngb-carousel>
  <template  ngFor let-home [ngForOf]="homes | async" >
    <ngbSlide [home]="home">
      <img src="{{item.thumb}}" alt="Random first slide">
    </ngbSlide>
  </template>
</ngb-carousel>

home.component.html?c8ce:1 错误：模板解析错误：(...)

谁能给我举个例子，将 ngb-carousel 与 ngFor 一起使用？

Answer 1

ng-bootstrap 幻灯片的语法是<template ngbSlide>，我们没有<ngbSlide>元素/组件，因此解析错误。你应该做的是像这样ngFor生成<template ngbSlide>：

<ngb-carousel>
  <template *ngFor="let imgIdx of [1, 2, 3]" ngbSlide>
    <img src="http://lorempixel.com/900/500?r={{imgIdx}}" alt="Random slide no {{imgIdx}}">
    <div class="carousel-caption">
      <h3>slide label no {{imgIdx}}</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </template>
</ngb-carousel>

这是一个正在运行的 plunker：http ://plnkr.co/edit/FXx9Q0UO14sp0RqbPnVh?p=preview

Answer 2

这可能是一个迟到的答案，但如果您来自数据库或任何地方的图像是一个数组。NgFor因此，您可以使用HTML遍历它们。

carousel.component.html

<ngb-carousel *ngIf="images!=null">
   <div *ngFor="let image of images">
      <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
           <img src="{{image}}" alt="image">
        </div>
      </ng-template>
    </div>
</ngb-carousel>

将ngfor创建ng-template等于数组的长度。

轮播组件.ts

images = ['image1', 'image2', 'image3'];