angular 2 / bootstrap - 使用 *ngFor 的可变长度轮播

Question

我正在尝试根据后端调用返回的数组中包含的图像数量来制作可变长度的图像轮播。这是我尝试过的，但存在一些问题，包括它说 data-slide-to 不是 li 的属性：

未处理的 Promise 拒绝：模板解析错误：无法绑定到 'slide-to' 因为它不是 'li' 的已知属性。 ("s="carousel-indicators" *ngFor="let i of arrayRange"> ]data-slide-to="{{i}}" ng-class='i == 0 ? “活跃”：“”'>

当我使用它们的索引手动插入我的图像时，这是有效的，但是当我尝试这个时它不起作用：

   <!--start carousel-->
   <div style="position: relative;" *ngIf="arrayRange != []">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators"  *ngFor="let i of arrayRange">
          <li data-target="#myCarousel" data-slide-to="{{i}}" ngClass="i == 0 ? 'active' : ''"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox" *ngFor="let j of arrayRange; let k = index">
          <div ng-class="i == 0 ? 'item active' : 'item'">
            <img src={{imagesArray[k]}} alt="Event Image">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
   </div>
      <!--end carousel-->

Answer 1

使用

[attr.data-slide-to]="i" ngClass="i == 0 ? 'active' : ''"

例如

<div style="position: relative;" *ngIf="arrayRange != []">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" *ngFor="let x of arrayRange;let i = index" [attr.data-slide-to]="i" ngClass="i == 0 ? 'active' : ''"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div *ngFor="let j of arrayRange; let k = index" [ngClass]="k == 0 ? 'item active' : 'item'">
                <img src={{imagesArray[k]}} alt="Event Image">
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

这对我有用:)

Answer 2

<li data-target="#myCarousel" *ngFor="let x of arrayRange;let i = index" 
data-slide-to="{{i}}" ngClass="i == 0 ? 'active' : ''"></li>

应该改为

<li data-target="#myCarousel" *ngFor="let x of arrayRange;let i = index" 
attr.data-slide-to="{{i}}" ngClass="i == 0 ? 'active' : ''"></li>

Answer 3

<div style="position: relative;" *ngIf="arrayRange != []">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" *ngFor="let x of arrayRange;let i = index" data-slide-to="{{i}}" ngClass="i == 0 ? 'active' : ''"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div *ngFor="let j of arrayRange; let k = index" ng-class="k == 0 ? 'item active' : 'item'">
                <img src={{imagesArray[k]}} alt="Event Image">
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

试试这个。错误是 ngFor 应该在 carousel-indicator 和 carousel-inner 内