时间戳

首页 > 解决方案 > Ngu-Carousel Angular 7：尝试从 json 导入数据

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

问题描述

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

未定义的长度

然后在我尝试单击上一个/下一个按钮后，它显示此错误。

未定义的innerHTML

这是我的代码。

图库.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;
  });
 };
}

图库.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>

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

标签： javascriptangulartypescriptngu-carousel

解决方案

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

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

还要添加一个默认值，否则可能会在开始时导致问题：

public product = [];

推荐阅读