Question

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

问题是我只将图像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>

也许是语法错误，还是太多^^，你们对如何解决我的问题有想法吗？

Answer 1

我建议事先映射对象并使用属性对其进行增强，让其命名为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>

Answer 2

您可以在TS文件中创建一个函数，以获取给定幻灯片ID的网址，例如

isHittable

然后在用户界面上

getUrl(slideid){
let slide=slides.find(s=> s._id==slideid);
return slide.imageurl
}

Answer 3

您可以尝试这样的事情：

在循环中您可以执行此操作

<div *ngFor="let presentation of presentations; let i = index;">
  <div [ngStyle]="getBackgroundImage(i)">
</div>

您获取背景的功能将如下所示

getBackgroundImage(i) {
let presentation = presentations[i];
let slide = presentation.slides.filter(
          slide => slide.id === presentation.slides[0].slideId);
}

return {
'background-image': `url($slide.imageurl)`

};

}

如何从角度html

3 个答案: