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？"active":""' >

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

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

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

这对我有用:)