Ngu-Carousel Angular 7：尝试从 json 导入数据

Question

我正在尝试从 json 导入数据并使用 ngu-carousel 显示它。我可以正确显示它但是它显示此错误。

length of undefined

然后在我尝试点击按钮 previous/next 后，它显示了这个错误。

innerHTML of undefined

这是我的代码。

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>

我不知道我的代码有什么问题。我希望你们能帮助我:)

Answer 1

我正在将我的工作版本与您的进行比较。尝试将此添加到您的组件中：

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

还要添加一个默认值，否则会导致开头出现问题：

public product = [];

Ngu-Carousel Angular 7：尝试从 json 导入数据

Ngu-Carousel Angular 7: Try to import data from json

javascript

typescript

angular

ngu-carousel