我所有的代码都在这里:
https://stackblitz.com/edit/angular-devextrem-gallery?file=src/app/app.component.html
我需要在深层嵌套循环中共享图库。问题可能是 dataSource 数组。上面的代码你可以看到如何循环打印图像,但我需要使用 devextreme 画廊在画廊中共享相同的图像。如果您在这里向我推荐任何解决方案但仅使用画廊,我会持开放态度...
我所有的代码都在这里:
https://stackblitz.com/edit/angular-devextrem-gallery?file=src/app/app.component.html
我需要在深层嵌套循环中共享图库。问题可能是 dataSource 数组。上面的代码你可以看到如何循环打印图像,但我需要使用 devextreme 画廊在画廊中共享相同的图像。如果您在这里向我推荐任何解决方案但仅使用画廊,我会持开放态度...
这是解决方案。不是单个数据源数组,而是通过映射训练 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