0

私は ngFor で ngb-carousel を使用したい、次のような私のコード: コード

しかし、これにより次のようなエラーが発生します。

<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 エラー: テンプレート解析エラー:(…)

ngFor で ngb-carousel を使用する例を誰が教えてくれますか?

4

2 に答える 2

4

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>

これが実際に動作していることを示す作業中のプランカーを次に示します。

于 2016-11-29T11:16:03.797 に答える
0

これは遅い答えかもしれませんが、データベースまたはその問題のどこかからの画像が配列である場合。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

carousel.component.ts

images = ['image1', 'image2', 'image3'];
于 2019-12-25T13:58:45.743 に答える