Carousel exception

[EkiFauziFirdaus]

I'm using latest ng-2 bootstrap (1.2.4)
I'm trying implement Dynamic Slide, but I got this error:

EXCEPTION: Error caused by: this._slides.add is not a function
TypeError: this._slides.add is not a function
at CarouselComponent.addSlide (carousel.component.ts:94)
at SlideComponent.ngOnInit (slide.component.ts:21)

[valorkin]

it is possible only if null was explicitly set to _slides
or carousel is not initialized

can you show your html?

[EkiFauziFirdaus]

I followed the tutorial/documentation: https://valor-software.com/ng2-bootstrap/#/carousel
html:

<div class="row">
  <h1>Dashboard</h1>
    <carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
      <slide *ngFor="let slide of slides; let index=index">
        <img [src]="slide.image">

        <div class="carousel-caption">
          <h4>Slide {{index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>
</div>

[valorkin]

what is initial value of slides?
it should not affect, but ...

[EkiFauziFirdaus]

my .ts file

public slideProduk: Produk[];
public slides: any[] = []; //from documentation
public myInterval: number = 1500; //from documentation
public activeSlideIndex: number; //from documentation
public addSlide():void{
this.produkService.getProdukByKategori(this.kodeKategori).then(slideProduk =>
{
let i : number;
for (i=0;i<slideProduk.length;i++){
this.slides.push({image: slideProduk[i].gambar});
}
});
console.log(this.slides);
/*
RESULT:
image: "../app/assets/img/produk/apple/5s.jpg"
image: "../app/assets/img/produk/lg/g4.jpg"
image: "../app/assets/img/produk/oppo/f1.jpg"
*/
/UPDATE: I'm not getting error, but the image is not displayed/
}

[valorkin]

you can try to replace <img [src]="slide.image">
with <img [attr.src]="slide.image">

and check network tab, until image is loaded it will not show anything

[EkiFauziFirdaus]

before I'm using v1.2.4, I used v1.1.6 and this code works:
html:

<carousel [interval]="carouselInterval" [noWrap]="noWrapSlides">
<slide *ngFor="let slide of slideProduk" [active]="slide.active">
<a [routerLink]="['/detailProduk',slide.kodeProduk]">
<img [src]="slide.gambar" class="img-responsive center-block" width="128px">
</a>
<div class="carousel-caption">
<p>{{slide.namaProduk}}</p>
</div>
</slide>
</carousel>

.ts

public carouselInterval:number = 3000;
  public noWrapSlides:boolean = false;
  public slideProduk: Produk[];
  public addSlide():void{
    this.produkService.getListProduk().then(slideProduk =>this.slideProduk = slideProduk);
  }
ngOnInit():void{
    this.addSlide();
  }

[valorkin]

slides were rewritten, so... anything is possible

[somasudhan]

hi i'm also facing the same issue and i'm getting the error like,

Uncaught (in promise): Error: Error in http://localhost:3000/app/components/tasks/tasks.component.html:4:12 caused by: this._slides.add is not a function
TypeError: this._slides.add is not a function

my html

ts
import { Component, OnInit, Input } from '@angular/core';

@component({
selector: 'carousel-component',
templateUrl: '../../../app/components/carousel/carousel.component.html'
})

export class CarouselComponent {

}

please can u help me out for this issue..

Thanks,
Arun S

[valorkin]

I need a sample repo to reproduce an issue, than I will be able to fix it fast

[zodrog]

Same here....

[valorkin]

until I have repo to reproduce I can not help with it
protected _slides: LinkedList<SlideComponent> = new LinkedList<SlideComponent>();
and there are no way in code set null here
so I need some repo to work with

[zodrog]

Hi,
I think the problem may come from the "this" this._slides.add(slide); and how Angular is calling on detectchanges on the child components.

Cheers

[preston]

Same issue here..

[EkiFauziFirdaus]

sample repo to reproduce carousel issue:
https://github.com/EkiFauziFirdaus/sample-repo

[valorkin]

I could guess that it system.js, 90% of issues with system.js ;(

[valorkin]

ok, thanks for repo
I found were issue is
in bundled

function LinkedList() {
        var _this = _super !== null && _super.apply(this, arguments) || this;

in common.js version

    function LinkedList() {
        _super.apply(this, arguments);

[valorkin]

this error was fixed, now I getting really old issue about:
Expression has changed after it was checked. building same app with webpack and no problems