随机加载图像数组

Question

我开发了一个小图片库。我打算有两个不同的数组，一个数组名称和一个图像数组。

加载数组名称时，会创建多个 "squares"，其中包含图像的名称和 src。

有没有办法在 "squares" 中放置随机图像并在其中保留名称数组？

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

// 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 文件中创建一个新函数，从您的图像数组中 returns 一个随机图像名称。

在您的 component.html 文件中，在 img src 调用新函数 ... img [src]="yourFunctionName()"。这会起作用，但这样做可能会在您的控制台中生成 ExpressionChangedAfterItHasBeenCheckedError。

我建议您创建一个新数组，并在 ngOnInit 生命周期方法中循环遍历名称数组，使用键 'name' 和 'image' 创建一个新对象（使用你的新随机函数），将它推送到你的新数组并在你的 component.html 文件中使用 *ngFor 代替。

Answer 2

我建议创建一个数组 "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

随机加载图像数组

Load array of images at random

imagelist

typescript

angular-material

angular