Question

我想在ngFor中使用ngb-carousel，我的代码如下： code

但这会产生一些错误：

<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>

以下是一位正在运作的实用工具：http://plnkr.co/edit/FXx9Q0UO14sp0RqbPnVh?p=preview

Answer 2

这可能是一个较晚的答案，但是如果您从数据库或其他任何地方获得的图像是数组。因此，您可以使用HTML上的NgFor遍历它们。

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。

carousel.component.ts

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

使用NgbCarousel和ngFor时模板解析错误

2 个答案: