0

I'm trying to import data from json and display it using ngu-carousel. I can display it correctly however it shows this error.

length of undefined

Then after I try to click on the button previous/next, it shows this error.

innerHTML of undefined

This is my code.

gallery.component.ts

import { Component, OnInit } from "@angular/core";
import { NguCarouselConfig } from "@ngu/carousel";
import { ShopService } from "../shop.service";

@Component ({ selector: "app-gallery", templateUrl: "./gallery.component.html" })

export class GalleryComponent implements OnInit {

public product: any;

public carouselImg: NguCarouselConfig = {
  grid: { xs: 1, sm: 2, md: 3, lg: 3, all: 0 },
  slide: 1,
  loop: true,
  speed: 250,
  point: {
   visible: true,
  },
  load: 2,
  velocity: 0,
  touch: true,
  };

constructor (private sv: ShopService) {};

ngOnInit () {
 this.sv.getProducts().subscribe(data => {
   this.product = data;
  });
 };
}

gallery.component.html

    <ngu-carousel #imgCarousel [inputs]="carouselImg" [dataSource]="product">
      <ngu-tile *nguCarouselDef="let item">
        <mat-card>
            <mat-card-header>
                <mat-card-title>{{item.name}}</mat-card-title>
            </mat-card-header>
            <img mat-card-image [src]="item.photo" alt="">
            <mat-card-content>
                <p>
                    {{item.remark}} <span><a href="">More info</a></span>
                </p>
            </mat-card-content>
        </mat-card>
      </ngu-tile>
      <button NguCarouselPrev class="leftRs">&lt;</button>
      <button NguCarouselNext class="rightRs">&gt;</button>
    </ngu-carousel>

I don't know what is the problem with my code. I hope you guys can help me :)

Rocky
  • 3
  • 1
  • Before the http call is resolved, your `product` is null, By that time the rendering attempt is made. I suspect that this is the issue. Try `public product = [];` – Supun De Silva Jun 05 '20 at 05:17
  • @SupunDeSilva The problem is already solved. Thanks for your idea. I solved by public product: any[ ] = [ ]; – Rocky Jun 05 '20 at 08:56

1 Answers1

0

I'm comparing my working version with yours. Try to add this in your component:

@ViewChild('imgCarousel') imgCarousel: NguCarousel<any>;

Also add a default value otherwise it can cause problems at the beginning:

public product = [];
Sandman
  • 1,480
  • 7
  • 23