Question

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

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

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

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

Exception in thread "main" com.typesafe.config.ConfigException$Missing: No configuration setting found for key 'bac-pqr'
        at com.typesafe.config.impl.SimpleConfig.findKeyOrNull(SimpleConfig.java:152)
        at com.typesafe.config.impl.SimpleConfig.findKey(SimpleConfig.java:145)
        at com.typesafe.config.impl.SimpleConfig.findOrNull(SimpleConfig.java:172)
        at com.typesafe.config.impl.SimpleConfig.find(SimpleConfig.java:184)
        at com.typesafe.config.impl.SimpleConfig.find(SimpleConfig.java:189)
        at com.typesafe.config.impl.SimpleConfig.getString(SimpleConfig.java:246)
        at .config.Settings$.Name$lzycompute(Settings.scala:37)
        at .config.Settings$.ClusterName(Settings.scala:37)
        at Main$.main(Main.scala:76)
        at .Main.main(Main.scala)

这对我有用：）

Answer 2

<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应该在旋转木马指示器和旋转木马内部

Answer 3

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

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

3 个答案: