Загрузка массива изображений в случайном порядке

Question

Я разработал галерею небольших изображений. Я намереваюсь иметь два разных массива, имена массивов и массив изображений.

При загрузке имен массивов создаются несколько «квадратов», которые содержат имя и sr c для изображения.

Есть ли способ поместить случайные изображения в "квадраты" и сохранить в нем массив имен?

DEMO - STACKBLITZ

HTML

<ul class="mdc-image-list my-image-list">
    <li class="mdc-image-list__item" *ngFor="let cat of names">
        <div class="mdc-image-list__image-aspect-container">
            <img [src]=""
              class="mdc-image-list__image imagelistCatalog">
          </div>
            <div class="mdc-image-list--with-text-protection">
                <div class="mdc-image-list__supporting supportingCatalog">
                    <span class="mdc-image-list__label textLabelCatalog">{{cat.name}}</span>
                </div>
            </div>
    </li>
</ul>

TS

names=[
  {
   name:"name1"
},
  {
     name:"name1"
},
  {
     name:"name1"
},
  {
     name:"name1"
}]

images=[
  {
   img:"https://material-components-web.appspot.com/images/photos/3x2/6.jpg"
},
  {
     img:"https://material-components-web.appspot.com/images/photos/3x2/5.jpg"
},
  {
     img:"https://material-components-web.appspot.com/images/photos/3x2/3.jpg"
},
  {
     img:"https://material-components-web.appspot.com/images/photos/2x3/2.jpg"
}]

Answer 1

Я предлагаю создать массив "order" и выполнять итерации по порядку, например,

order:number[]

ngOnInit()
{
  this.order=this.images.map((n,index)=>index); //create an array [0,1,2,3..]
  this.order.sort((a,b)=>Math.random()>.5);  //shuffle the array
}

. Затем использовать

<li class="mdc-image-list__item" *ngFor="let index of order">
   {{images[index]}}{{names[index]}}
</li>

. ПРИМЕЧАНИЕ: вы можете улучшить приложение, если используете массив объекта, а не два массива. например, если у вас есть

images=[{img:"...",name:".."},{img:"...",name:".."},{img:"...",name:".."}..]

и используйте

<li class="mdc-image-list__item" *ngFor="let index of order">
   {{images[index].img}}{{images[index].name}}
</li>

см. stackblitz

Answer 2

// Component.ts file
 newArr = []
 ngOnInit(): void {
    for(var i = 0 ; i < this.names.length; i++){
      this.newArr[i] = {};
      this.newArr[i]['name'] = this.names[i].name;
      this.newArr[i]['img'] = this.imgRand();
    }
 }
 
 imgRand(){
    let img = this.images[Math.floor(Math.random() *    this.images.length)];
    return img.img;
 }

 <li class="mdc-image-list__item" *ngFor="let cat of newArr">
  <div class="mdc-image-list__image-aspect-container">
    <img [src]="cat.img" class="mdc-image-list__image imagelistCatalog">
  </div>
  <div class="mdc-image-list--with-text-protection">
    <div class="mdc-image-list__supporting supportingCatalog">
      <span class="mdc-image-list__label textLabelCatalog">{{cat.name}}</span>
    </div>
  </div>
</li>

Создайте новую функцию в вашем файле component.ts, которая возвращает случайное имя изображения из вашего массива изображений.

В вашем файле компонентов. html, по img sr c вызовите эту новую функцию ... img [src] = "yourFunctionName ()". Это будет работать, но при этом, вероятно, будет сгенерировано ExpressionChangedAfterItHasBeenCheckedError в вашей консоли.

Я бы порекомендовал вам создать новый массив и в методе жизненного цикла ngOnInit l oop через массив names, создайте новый объект с ключами 'name' и 'image' (используя вашу новую случайную функцию), вставьте его в новый массив и используйте его в своем компоненте. html файл вместо * ngFor.