类型错误：使用 *ngFor 在轮播上未定义 slideArr[0]答案

【问题标题】：TypeError: slideArr[0] is undefined on carousel using *ngFor类型错误：使用 *ngFor 在轮播上未定义 slideArr[0]
【发布时间】：2017-05-02 16:45:20
【问题描述】：

我一直在努力寻找我做错了什么，也许你可以帮助我。

我正在尝试在 ngb-carousel 模板上使用 *ngFor="let image 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 的错误。有什么帮助吗？在此先感谢:)

【问题讨论】：

标签： twitter-bootstrap angular ng-bootstrap

【解决方案1】：

如果没有明确的重现场景，很难说任何确定的内容，但需要注意的一件事是，您必须使用 <ng-template> 元素和最新的（在撰写本文时为 1.0.0-alpha.25）发布的 @ 987654321@

所以你的例子会转化为：

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

这是一个从 demo page 分叉的 plunker，显示了与 <ng-template> 一起工作的东西：http://plnkr.co/edit/2ec6OwwxCEawWNVaqEpk?p=preview - 您可能希望分叉这个 plunker 以提供清晰的重现场景并在需要时扩展您的问题。

【讨论】：

【解决方案2】：

尝试从 ng-template 中移动 ngFor

可能是这样的：

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

【讨论】：

谢谢，它有效。必须使用 ng-template 代替模板标签？
模板在 Angular4 中已被弃用。在角度 4 中使用 ng-template。如果它适合您，请接受答案。