How to bind dataSource in dx Gallery?

Question

The data source needs to be bind in a more nested loop.

        <div *ngFor="let singleImg of training.exercise.pictureList; let t = index">
          <dx-gallery #gallery  
          id="gallery"
          [dataSource]="singleImg.url" 
          [loop]="true"
          [height]="300"
          [showNavButtons]="true"
          [showIndicator]="true"
      ></dx-gallery>
        </div>

I have a one loop before training.exercise.pictureList but it no important for you. I know to loop in .ts file and bind array here but always same photo is printed... here is problem probably index to bind

Answer 1

According to the documentation of devextreme, datasource is an array of string of a url of each image.

For example:

[dataSource] = [
    "images/gallery/1.jpg",
    "images/gallery/2.jpg",
    "images/gallery/3.jpg",
    "images/gallery/4.jpg",
    "images/gallery/5.jpg",
    "images/gallery/6.jpg",
    "images/gallery/7.jpg",
    "images/gallery/8.jpg",
    "images/gallery/9.jpg"];

You can try to delete the div element and give the array directly to dataSource like :

<dxGalley 
[dataSource]= "training.exercise.pictureList";>