Question

嘿，我对angular还不陌生，我正在建立一个网站，该网站的每个组件中都包含灯箱画廊。建议我ngx-lightbox解决我的照片库问题。我无法使其在实际组件中正常工作。

在此处提供的文档中：https://www.npmjs.com/package/ngx-lightbox

我已经完成了将ngx-lightbox导入到我的项目中的步骤，已经在我的angular.json中声明了它，已经在appmodule.ts中导入了它，添加了html标记和组件代码。

但是我现在遇到的问题是我遇到了错误，

“ src / app / pages / graphic-design / graphic-design.component.ts（11,19）中的错误：错误TS2314：通用类型'Array'需要1个类型参数。 src / app / pages / graphic-design / graphic-design.component.ts（35,12）：错误TS2551：“ GraphicDesignComponent”类型上不存在属性“ _albums”。你是说'_album'吗？ src / app / pages / graphic-design / graphic-design.component.ts（41,30）：错误TS2551：“ GraphicDesignComponent”类型上不存在属性“ _albums”。你是说'_album'吗？”

这是我的组件代码（直接从文档中复制。我添加的唯一内容是应该是图像的两个对象，但是我无法越过错误来查看它们是否有效。

import { Component, OnInit } from '@angular/core'; 
import { Lightbox } from 'ngx-lightbox';
declare var $:any;

@Component({
  selector: 'app-graphic-design',
  templateUrl: './graphic-design.component.html',
  styleUrls: ['./graphic-design.component.css']
})
export class GraphicDesignComponent{
  private _album: Array = [
    { 
         src: "../assets/images/Roycreates-red.jpg",
         caption: "test",
         thumb: "../assets/images/Roycreates-red.jpg"

    },
    {
      src: "../assets/images/Roycreates-red.jpg",
      caption: "test",
      thumb: "../assets/images/Roycreates-red.jpg"
    }
  ];
  constructor(private _lightbox: Lightbox) {
    for (let i = 1; i <= 4; i++) {
      const src = 'demo/img/image' + i + '.jpg';
      const caption = 'Image ' + i + ' caption here';
      const thumb = 'demo/img/image' + i + '-thumb.jpg';
      const album = {
         src: src,
         caption: caption,
         thumb: thumb
      };

      this._albums.push(album);
    }
  }

  open(index: number): void {
    // open lightbox
    this._lightbox.open(this._albums, index);
  }

  close(): void {
    // close lightbox programmatically
    this._lightbox.close();
  }
}

标记代码实际上与文档中的代码完全相同。我已经在组件代码中列出了我的图像文件源。希望我能清楚地解释我需要在代码中修复的内容，才能使其正常工作。我以前从未使用过ngx组件，而我对angular还是很陌生。

以下是供参考的标记代码：

<div *ngFor="let image of _albums; let i=index">
    <img [src]="image.thumb" (click)="open(i)"/>
  </div>

P.S。我在某些图库组件上看到了小，中，大文件选项。我需要为上传到图库的每个图像执行此操作吗？我不认为ngx-lightbox具有此功能，但是ngx-gallery具有，我不确定这是怎么回事。无论如何，真的希望我能尽快得到此设置。谢谢

Answer 1

您已将数组初始化为_album，但将其用作_albums，因此您只需要在_album的末尾添加“ s”，如下所示：

private _albums: Array = [
{ 
     src: "../assets/images/Roycreates-red.jpg",
     caption: "test",
     thumb: "../assets/images/Roycreates-red.jpg"

},
{
  src: "../assets/images/Roycreates-red.jpg",
  caption: "test",
  thumb: "../assets/images/Roycreates-red.jpg"
}
];

Answer 2

您忘记给出Array的类型（换句话说，它将是array包含的元素的类型）。

更改此行：

Field timestampField = Fields.field("timestamp");
ProjectionOperation projectStage = Aggregation
    .project("application", "uploadedRefs", "uploadedKb", "downloadedDocs", "downloadedKb")
        .and(DateOperators.Year.year(timestampField)).as("year")
        .and(DateOperators.Month.month(timestampField)).as("month")
        .and(DateOperators.DayOfMonth.dayOfMonth(timestampField)).as("day")
        .and(DateOperators.DateFromParts.dateFromParts()
            .year(DateOperators.Year.year(timestampField))
            .month(DateOperators.Month.month(timestampField))
            .day(DateOperators.DayOfMonth.dayOfMonth(timestampField))
        ).as("startIntervalTimestamp");

或者您可以使用其他语法，例如：

 private _album: Array<{src: string, caption: string, thumb: string}> // ...rest of the code

无法在角度组件中设置ngx-lightbox

2 个答案: