如何在深层嵌套循环中共享img？JS 角 DEVEXTREME

Question

我所有的代码都在这里：

https://stackblitz.com/edit/angular-devextrem-gallery?file=src/app/app.component.html

我需要在深层嵌套循环中共享图库。问题可能是 dataSource 数组。上面的代码您可以看到如何循环打印图像，但我需要使用 dev Extreme gallery 在画廊中共享相同的图像。如果您在这里推荐我任何解决方案但仅使用画廊，我持开放态度......

Answer 1

这是解决方案。通过映射训练 id 特定数组，而不是单个数据源数组。所以基本上将你的 html 更改为：-<div class="modal-header">&nbsp; &nbsp; <div class="box-one">&nbsp; &nbsp; &nbsp; &nbsp; <div class="header"></div>&nbsp; &nbsp; </div></div><div class="modal-body">&nbsp; &nbsp; <div class="wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <ng-container *ngIf="firstPage">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="column-holder" *ngFor="let training of aca.trainingExercises; let i = index;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="single-exe">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="holder-name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ng-container *ngIf="firstPage">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="display: flex; width: 100%; justify-content: center; height: 100%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- <div *ngFor="let singleImg of training.exercise.pictureList"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="width: 20%; height: 20vh; margin: 0 20px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100%" height="100%" [src]="singleImg.url" alt="img exercise">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="description-below-img"> {{ truncate(singleImg.description) }}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div> -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dx-gallery #gallery id="gallery" [dataSource]="dataSourceImg.get(training.id)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [loop]="true" [height]="300" [showNavButtons]="true" [showIndicator]="true">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dx-gallery>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; </div></div>然后将数据源从数组更改为映射，如下所示：-dataSourceImg: Map<number, string[]> = new Map();然后将 ngInit 代码更改为：-this.aca.trainingExercises.forEach(training => {&nbsp; &nbsp; &nbsp; this.dataSourceImg.set(training.id, []);&nbsp; &nbsp; &nbsp; training.exercise.pictureList.forEach(img => {&nbsp; &nbsp; &nbsp; &nbsp; this.dataSourceImg.get(training.id).push(img.url);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });工作堆栈闪电战https://stackblitz.com/edit/angular-devextrem-gallery-92fa1f?file=src/app/app.component.ts