问题标签 [ngx-gallery]

我只是ngx-gallery在我的项目中尝试使用来自谷歌图片的一些 url，但每次我在控制台中收到以下错误：

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

我已经在我的 module.ts 中正确导入了模块。我的html是：

到目前为止，我大部分时间都在使用 Node，所以对 angular 不太熟悉，所以如果你能告诉我这里的方法，我将不胜感激。提前致谢。

我正在使用 ngx-gallery 来显示图片库。尽管我将显示图像箭头属性设置为 true，但我看不到图像中的箭头。

我正在使用 Angular 7。这是我的 gallery.ts 文件代码：

我还按照某些论坛中的描述更改了 css：

这是我的 gallery.html 代码

我想知道，如何给 ngx-gallery ( https://github.com/MurhafSousli/ngx-gallery ) 一个新的高度。它有一个 500px 的固定值，改变父 div 的高度并没有改变任何东西。

我正在寻找这样的模板中的某些属性

Stackblitz：https ://stackblitz.com/edit/angular-osh1vu

后续问题：在 Stackblitz 中，行为是适合高度（关于黑色背景），而在我的应用程序中，它是适合宽度，因此黑色条纹在图像上方和下方。我怎么能改变这个呢？（这在旧版本上是可能的，但不再是有效属性）

或者

一些 css 代码（在开发工具中查看，滑动图像标记为 div.g-template.g-item-template），也无法覆盖：

我是 Angular 的新手，我正在尝试在我的项目中添加图片库。如果使用 this.galleryImages[] 中的硬编码数据，则图片库可以工作，但是当我将订阅数据传递给 this.galleryImages[] 时，它没有显示任何内容。注意我可以在控制台中看到我的数据。它不仅绑定在 Ngx 库中。

这是 ngx-gallery repo 的链接形式：

https://www.npmjs.com/package/@kolkov/ngx-gallery

这是显示我的画廊的图像，但仅在我输入硬编码数据时显示，而不是来自我的库 图像的数据

这是我来自服务的数据：

以下是我的代码：

HTML 代码：

我在这里有这个ngx-gallery-9 stackblitz，我正在尝试弄清楚如何将 :first-of-type 或 nth-child(1) 应用于图片库中的“fa-star”图标。

问题- 我只想为画廊中的第一个“fa-star”字体真棒图标着色。所以只有第一张图片是黄色的。

我尝试了几种不同的方法，但它们似乎都将 css 应用于每个图标或没有图标，而不仅仅是第一个

我在下面尝试过的几件事没有运气

我正在使用ngx-gallery来显示图像。我想在修改订单时重新加载图像或在缩略图库、主图像和整页图像中刷新它们（例如交换图像数组中的图像 1 和 3）

问题- 我不知道如何重新加载/重置/重新渲染/刷新缩略图库。如果没有 ngx-gallery 的方式来做，也许有打字稿的方式？

这是我到目前为止尝试过的

在我的 .ts 文件中

1. 将图像设置为 null 然后替换图像：

   this.galleryImages = null;

   this.galleryImages = this.memberService.member.photos;

2. 使用了文档中的 show(0) 方法 - 显示图像 0 但未在缩略图库中重新排列顺序

   @ViewChild('gallery') 画廊：NgxGalleryComponent;

   this.gallery.show(0);

3. 我也试过

   this.gallery.thubmnails.reset(1);

   this.gallery.thubmnails.reset(0);

   this.gallery.ngOnInit();

更新- 我在组件中找到了 thumbnail 属性，所以我可以更改缩略图的顺序，但仍然找不到更改主图像顺序的方法。

这是我更改缩略图排序的方法

但这不会改变其他图像的顺序，当我尝试使用相同的方法时，它不适用于更大的（整页、页面）图像。

Update2我使用了一个间隔来提供解决方法并让它做我想做的事情。在我重新排序“this.memberService.member.photos”后，我清除了数组，然后用值重置它。没有间隔它不起作用。

有没有办法使用ngx-crystal-gallary为网格视图中的每个图像添加标题标签

我使用 angular 11。我在终端中输入 npm install ngx-gallery --save 并加载 ngx-gallery 包。然后我按照文档中的说明在 module.ts 文件中进行了导入过程。起初它在链接上给出了错误。我将终端结尾中指定的行中的渲染器转换为渲染器2。这个问题已经消失了。现在在控制台中'Type NgxGalleryModule 没有'ɵmod'属性。我完全按照文档中的说明进行操作。我怎么解决这个问题？

我想通过覆盖 previewOpen() 方法打开带有图像索引的 matdialog：它不应该打开原始（大图像）预览，而是打开 matdialog（我已经有代码）。

有什么办法可以做到这一点？

提前致谢！

我的角度版本：

npm install 解决不了问题，我的 npm 版本是 7.12.0

我试图运行npm install @kolkov/ngx-gallery --save安装 ngx-gallery，它给了我以下错误