Question

我只是在我的项目中尝试使用Google图片中的一些网址进行ngx-gallery，但是每次在控制台中遇到以下错误时：

ERROR TypeError: Cannot read property 'replace' of undefined at NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.validateUrl (ngx-gallery.umd.js:121) at NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.getBackgroundUrl (ngx-gallery.umd.js:133) at NgxGalleryImageComponent.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryImageComponent.getSafeUrl (ngx-gallery.umd.js:367) at Object.eval [as updateRenderer] (NgxGalleryImageComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:10872) at checkAndUpdateView (core.js:10248) at callViewAction (core.js:10484) at execEmbeddedViewsAction (core.js:10447) at checkAndUpdateView (core.js:10244) at callViewAction (core.js:10484)

这是我的组件。

export class FefileComponent implements OnInit {
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  ngOnInit(): void {
  this.galleryOptions = [
    {
      'imageArrows': true,
      'imageSwipe': false,
      'thumbnailsArrows': true,
      'thumbnailsSwipe': false,
      'previewSwipe': true,
      'thumbnailsMargin': 0,
      'thumbnailMargin': 0,
      'thumbnailsColumns': 6,
      'width': '100%',
      'height': '450px',
    },
    {
      'imageArrows': true,
      'imageSwipe': false,
      'thumbnailsArrows': true,
      'thumbnailsSwipe': false,
      'previewSwipe': true,
      'thumbnailsMargin': 0,
      'thumbnailMargin': 0,
      'thumbnailsColumns': 6,
      'width': '100%',
      'height': '450px',
    },
  ];

  this.galleryImages = [
      {
          small: 'https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350',
          big: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg'
      },
      {
          small: 'https://images.hindi.news18.com/ibnkhabar/uploads/459x306/jpg/2018/02/p5-1.jpg',
          big: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNWkbzIr0rgBhjLJ1OqE7gmDEU5RqOunqwW-na5kcqKfr4tZx5eg'
      }
  ];
  }
}

我已经将Module正确地导入了我的module.ts中。我的html是：

<div class="container">

    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href>Angular2 File Upload</a>
        </div>
    </div>

    <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

</div>

到目前为止，我主要与Node一起工作，因此对角度的了解并不多，因此，如果您能向我展示这里的方法，我将不胜感激。预先感谢。

Answer 1

尝试用ngx-gallery来包装*ngIf

<div *ngIf="galleryOptions?.length && galleryImages?.length">
  <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
</div>

我的猜测是，在这些对象被数据填充之前，您的视图已初始化；

实现ngx-gallery时无法读取未定义的属性“替换”

1 个答案: