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

Question

我所有的代码都在这里：

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

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

Answer 1

这是解决方案。 不是单个数据源数组，而是由 map 训练 id 特定数组。 所以基本上将您的 html 更改为：-

<div class="modal-header">
    <div class="box-one">
        <div class="header"></div>
    </div>
</div>

<div class="modal-body">
    <div class="wrapper">
        <ng-container *ngIf="firstPage">
            <div class="column-holder" *ngFor="let training of aca.trainingExercises; let i = index;">
                <div class="single-exe">
                    <div class="holder-name">
                        <ng-container *ngIf="firstPage">
                            <div style="display: flex; width: 100%; justify-content: center; height: 100%;">
                                <!-- <div *ngFor="let singleImg of training.exercise.pictureList"
                                    style="width: 20%; height: 20vh; margin: 0 20px;">
                                    <img width="100%" height="100%" [src]="singleImg.url" alt="img exercise">
                                    <p class="description-below-img"> {{ truncate(singleImg.description) }}</p>
                                </div> -->
                                <dx-gallery #gallery id="gallery" [dataSource]="dataSourceImg.get(training.id)"
                                    [loop]="true" [height]="300" [showNavButtons]="true" [showIndicator]="true">
                                </dx-gallery>
                            </div>
                        </ng-container>
                    </div>
                </div>
            </div>
        </ng-container>
    </div>
</div>

然后将您的数据源从数组更改为 map，如下所示：-

dataSourceImg: Map<number, string[]> = new Map();

然后将您的 ngInit 代码更改为：-

this.aca.trainingExercises.forEach(training => {
      this.dataSourceImg.set(training.id, []);
      training.exercise.pictureList.forEach(img => {
        this.dataSourceImg.get(training.id).push(img.url);
      });
    });

工作堆栈闪电战

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