Невозможно прочитать свойство 'replace' из неопределенного при реализации ngx-gallery

Question

Я просто пытался ngx-gallery в своем проекте с несколькими URL-адресами из изображений Google, но каждый раз, когда я получаю следующую ошибку в консоли:

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)

Вот мойcomponent.ts

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.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, поэтому не очень хорошо разбираюсь в angular, поэтому я был бы признателен, если бы вы просто показали мне путь здесь.Заранее спасибо.

Answer 1

ngx-Gallery использует URL для всех размеров (маленький, средний, большой). но здесь вы просто передаете только URL для малого и большого размера, а функция replace считывает URL для всех размеров и получает undefined для среднего URL, поэтому вы получаете эту ошибку. Попробуйте также разместить средний URL и посмотреть, работает ли он.

Answer 2

попробуйте обернуть ваше ngx-gallery с помощью *ngIf

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

Я предполагаю, что ваше представление инициализировано раньше, чем эти объекты заполняются данными;