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

Question

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

\n\n

但这会产生一些错误，如下所示：

\n\n

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

\n\n

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

\n\n

谁能给我一个使用 ngb-carousel 和 ngFor 的例子？

\n

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