图像 src 中带有循环的 mdc-image-list

Question

我正在尝试查看一组图像。我的 objective 在图像 src 中实现了一个功能，该功能从另一个 API.

中单独获取图像

我的问题是当我登录控制台时，我看到重复的结果。有谁知道问题的根源，我该如何解决？

我把复制结果的例子留在下面，实际上它们应该只出现 8。

HTML

<ul class="mdc-image-list mdc-image-list--masonry masonry-image-list">
  <li class="mdc-image-list__item"
      *ngFor="let image of data">
   <img class="mdc-image-list__image"
        [src]="getImage(image.src)">
  </li>
</ul>

.TS

getImage(url) {
    console.log(url);
    return url;
  }

Answer 1

我想出了可能的问题。根据我的评论，GetImage() 方法可能作为 Angular 更新周期的一部分被多次评估。

我会在 data 数组首次填充时对其进行迭代，对 getImage() 进行自己的奇异计算，保存结果：

public data: any[];

public ngOnInit(): void {
  const data = this.service.getDataSomehow();

  data.forEach((img: any) => {
    this.data.push(this.getImage(img.src));
  });
}

然后您的模板稍微更改为：

<ul class="mdc-image-list mdc-image-list--masonry masonry-image-list">
  <li class="mdc-image-list__item"
      *ngFor="let image of data">
   <img class="mdc-image-list__image"
        [src]="image">
  </li>
</ul>

不过，我会指出，您应该考虑使用 DomSanitizer 来处理您的资源 URL。

图像 src 中带有循环的 mdc-image-list

mdc-image-list with loop in the image src

imagelist

typescript

angular-material

angular