如何在深层嵌套循环中共享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">

    <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>

然后将数据源从数组更改为映射，如下所示：-

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