Twitter bootstrap 角度2/引导-使用*ngFor的可变长度旋转木马

我试图根据从后端调用返回的数组中包含的图像数量，对图像进行可变长度的旋转传送。这是我尝试过的，但存在一些问题，包括它说的数据幻灯片不是li的财产：

未处理的承诺拒绝：模板分析错误：无法绑定到 “滑到”，因为它不是“li”的已知属性。 （“s=”旋转木马指示器“*ngFor=”让我离开阵列范围“> ]数据幻灯片至=“{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-->

试试这个。错误是ngFor应该在转盘指示器内，转盘内部使用

[attr.data slide to]=“i”ngClass=“i==0？”“活动”：”

比如说

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

这对我很有用：）

应更改为

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

您需要在所有非本机元素属性上使用属性绑定。例如，

[数据幻灯片]=“{{i}}”

。遗憾的是，没有工作：（arrayRange和imagesArrayimages的类/对象结构是什么？arrayRange是一个URL字符串数组，arrayRange是一个从0到imagesArray.Length的整数数组。将其更改为代码后仍会出现相同的错误：未处理的承诺拒绝：模板解析错误：无法绑定到“slide to”，因为它不是“li”的已知属性“.（“icators”>

]数据滑动到=“{x}”[ngClass]=”{'active'：i==0}>

1”

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