Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property length of undefined #316

Closed
AntonGrekov opened this issue Oct 18, 2020 · 3 comments · Fixed by #442
Closed

Cannot read property length of undefined #316

AntonGrekov opened this issue Oct 18, 2020 · 3 comments · Fixed by #442

Comments

@AntonGrekov
Copy link

AntonGrekov commented Oct 18, 2020

I am sorry, that might not be a bug, but i am stucked :( Was trying to google or find more info on that problem for 2 days.
I have an http get method in my project that returns an array of objects like this:

[ 
    {title: "Title1", id: 5, city: "City1"},
    {title: "Title2", id: 3, city: "City2"},
...
]
myStream$ = this.http.get('/api/getData')

http is a casual Angular Http Service that returns an observable.

I tried using pipe that slightly modifies that data and then use that Observable$ with ngu-carousel this way:

<div class="component__slider">
   <ngu-carousel
       #myCarousel
       [inputs]="carouselConfig"
       [dataSource]="myStream$ | async"
   >

I even simplified it, and tried using only http.get call to supply data to carousel. In either way i get "cannot read length of undefined". Why so?

My other ngu-carousels in project use Store select observables and work great with async syntax as dataSource, even if i delay data loading from Store(to make it undefined for some seconds). Still, it's ok, ngu-carousel waits till data is emitted and then display slides, but it won't work that way with http.get method

@AntonGrekov
Copy link
Author

I tried to initialize myStream$ with empty/non-empty array: myStream$: Observable<any[]> = of([]), and console.loged it's length at start(work as expected) to may be give something to ngu-carousel at start, but still same error

@PedroJesusRomeroOrtega
Copy link

I have the same error. Is there any workaround while this bug is getting fixed?

@PedroJesusRomeroOrtega
Copy link

The problem is in this line of ngu-carousel.component.ts, when using http.get observable the datasource is undefined the first time.

As a workaround to avoid the error I subscribe to the observable before, instead of in the datasource property of ngu-carousel

+<ng-container *ngIf="users$ | async as users">
-   <ngu-carousel #myCarousel [inputs]="carouselHttpConfig" [dataSource]="users$ | async">
+  <ngu-carousel #myCarousel [inputs]="carouselHttpConfig" [dataSource]="users">
      <ngu-item *nguCarouselDef="let item;">
        {{item.name}}
      </ngu-item>
   </ngu-carousel>
+</ng-container>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants