时间戳

首页 > 解决方案 > 如何从角度html中的数组中过滤对象属性

angular - 如何从角度html中的数组中过滤对象属性

问题描述

我正在创建一个“演示文稿编辑器”，在这个编辑器中，我可以概览创建的所有演示文稿。在概述中，我想将每个演示文稿的第一张幻灯片显示为预览。

问题是我只将图像 url 存储在“幻灯片”数组中。“演示文稿”数组只是演示文稿中使用的幻灯片 ID 的列表。

因此，为了从所有内容中过滤背景图像，我尝试了这个：

<div [ngStyle]="{'background-image': 'url('+(slides | filter : {'_id':'presentation.slides[0].slideid'}).imageurl+')'}">

我想为演示文稿的第一张幻灯片的 id 过滤幻灯片数组，然后从该幻灯片中获取 url。

因为我想显示每个演示文稿，所以我必须动态显示这个“预览幻灯片”，所以这就是我的 html 大致看起来像 rn

<div *ngFor="let presentation of presentations">
   // The div from above
</div>

也许是语法错误或太多^^，你们知道如何解决我的问题吗？

标签： angulartypescript

解决方案

我建议事先映射您的对象并使用属性增强它，让我们命名它thumbnail。

您现在的组件中可能有这样的东西：

ngOnInit() {
  this.anyService.getPresentations().pipe(
    /*some kind of unsubscription*/
  ).subscribe(presentations => this.presentations = presentations);

  this.anyService.getSlides().pipe(
    /*some kind of unsubscription*/
  ).subscribe(slides => this.slides = slides);
}

我推荐使用 rxjs 和异步管道。它会导致这样的事情

ngOnInit() {
  this.presentations$ = this.anyService.getPresentations();
  this.slides$ = this.anyService.getSlides();

  this.extendedPresentations$ = combineLatest([this.presentations$, this.slides$]).pipe(
    // TODO: care about falsy values
    map(([presentations, slides]) => presentations.map(
      presentation => {
        return {
          ...presentation,
          thumbnail: slides.find(slide => slide._id === presentation.slides[0].slideid).imageurl
        }
      }
    )),
  )
}

在模板中：

<div *ngFor="let presentation of extendedPresentations$ | async">
   <div [ngStyle]="{'background-image': presentation.thumbnail}">
</div>

推荐阅读