TypeError:使用* ngFor在carousel上未定义slideArr [0]

时间:2017-05-02 16:45:20

标签: twitter-bootstrap angular ng-bootstrap

我一直试图搜索我做错了什么,也许你可以帮助我。

我正试图在ngb-carousel模板上使用 * ngFor =“let card of card.carouselImgs”来显示旋转木马,如下所示:

 <ngb-carousel>
     <template *ngFor="let image of card.carouselImgs" ngbSlide  >
       <img src="{{image.imgUrl}}" alt="{{image.imgAlt}}">
     </template>
   </ngb-carousel>

但是我收到了这个错误:

ERROR TypeError: slideArr[0] is undefined
Stack trace:
NgbCarousel.prototype._getNextSlide@http://localhost:4200/vendor.bundle.js:43189:9
NgbCarousel.prototype.cycleToNext@http://localhost:4200/vendor.bundle.js:43149:76
NgbCarousel.prototype._startTimer/this._slideChangeInterval<@http://localhost:4200/vendor.bundle.js:43174:67
ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:3176:17
onInvokeTask@http://localhost:4200/vendor.bundle.js:4326:28
ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:3175:17
Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:2943:28
ZoneTask/this.invoke@http://localhost:4200/polyfills.bundle.js:3238:28
timer@http://localhost:4200/polyfills.bundle.js:4433:17

所以我检查了数据是否有问题,但事实并非如此,这样做的一切正常:

<div *ngFor="let image of card.carouselImgs">
  imgUrl: {{image.imgUrl}} 
  imgAlt: {{image.imgAlt}}
</div>

输出:

imgUrl: ../../assets/briefcase/1.jpg imgAlt: Hello
imgUrl: ../../assets/briefcase/2.jpg imgAlt: Hello
imgUrl: ../../assets/briefcase/3.jpg imgAlt: Hello

所以我认为是ngb-carousel的错误。有帮助吗? 在此先感谢:)

2 个答案:

答案 0 :(得分:1)

如果没有明确的重现方案,很难说明确的事情,但有一点需要注意的是,必须使用<ng-template>元素与最新的(1.0.0-alpha.25在撰写本文时)释放https://ng-bootstrap.github.io/

因此,您的示例将转换为:

<ngb-carousel>
     <ng-template *ngFor="let image of card.carouselImgs" ngbSlide  >
       <img src="{{image.imgUrl}}" alt="{{image.imgAlt}}">
     </ng-template>
   </ngb-carousel>

这是一个来自demo page的分支机构,显示与<ng-template>一起使用的内容:http://plnkr.co/edit/2ec6OwwxCEawWNVaqEpk?p=preview - 您可能希望将此分析器分​​叉以提供清晰的重现方案,并在需要时扩展您的问题。

答案 1 :(得分:0)

尝试从ng-template

移动ngFor

可能是这样的:

  <ng-container *ngFor="let image of card.carouselImgs">
      <ng-template ngbSlide>....</ng-template>
  </ng-container>