шаблона ошибок синтаксического анализа при использовании NgbCarousel с ngFor

Question

Я хочу использовать NGB-карусель с ngFor, мой код, как это: 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> 

Вот рабочий plunker показ этого в действии: http://plnkr.co/edit/FXx9Q0UO14sp0RqbPnVh?p=preview