2

我正在使用引导轮播来浏览我从外部 API 引入的数据。API 数组中的第一个元素显示在轮播上，但是当我按下“下一个”或“上一个”箭头按钮时，屏幕会闪烁并出现以下错误：Uncaught TypeError: Cannot read property 'offsetWidth' of undefined.

这个错误是什么意思，我该如何解决？起初我认为这意味着它无法读取尚不存在的数据，因为 API 数据需要很长时间才能获取，但事实并非如此，因为第一张幻灯片显示良好。

如果有帮助，这是我的html： 

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li ng-repeat="item in slides" data-target="#myCarousel" data-slide-to="item" ng-class="{active : $first}"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item" ng-class="{active : $first}" ng-repeat="item in slides">
      <img class="first-slide" ng-src="{{item.media[0]['media-metadata'][0].url}}" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>{{item.title}}</h1>
          <p>{{item.main}}</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
  <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><!-- /.carousel -->
4

1 回答 1

1 
<div id="myCarousel" class="carousel" ng-class="slides.length?'slide':''" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
    <li ng-repeat="item in slides" data-target="#myCarousel" data-slide-to="item" ng-class="{active : $first}"></li>
</ol>

我的回答可能为时已晚，但可能会帮助将来需要的人。在 class="carousel slide" 存在的第一行代码中，必须用 class="carousel" ng-class="slides.length?'slide':''" 替换，这确保仅在项目存在时才添加幻灯片效果.

于 2017-08-30T08:58:36.557 回答