TA貢獻1942條經驗 獲得超3個贊
這是解決方案。通過映射訓練 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
舉報