如何使用 unsplash 在循环中生成不同的随机图像

Question

我创建了一个待办事项列表项目，其中每个项目都有一张图片。我正在使用 unsplash 来生成随机图像，但我得到的是相同的图像。如何为我创建的每个任务获取不同的图像

我正在使用 MEAN 堆栈创建待办事项列表项目。我使用 *ngFor 循环遍历所有任务以在我的网站上为每个任务显示一个图像，但所有任务都具有相同的图像。

home.component.ts

    ngOnInit() {
      this.componentGetAllTasks();
      this.randomNumber = (Math.floor(Math.random()*10));
  }

  componentGetAllTasks(){
    let obs = this._httpService.serviceGetAllTasks();
    obs.subscribe(data =>{
      console.log('Got all tasks from component', data);
      this.tasks = data['tasks'];
      this.randomNumber()
    })
  }

http.service.ts

  serviceGetAllTasks(){
    return this._http.get('/tasks');
  }

控制器

    all: (req, res)=>{
        Task.find({}, (err, tasks)=>{
            if(err){
                res.json({error: 'Cannot find all tasks', err});
            } else {
                res.json({message: 'Found all tasks!!!', tasks})
            }
        })
    },

HTML

<div class="container card-container task-container">
    <div class="card mb-4"  *ngFor='let task of tasks'>
        <div class="row no-gutters" >
            <div class="col-md-4 gallery">
                <img src="https://source.unsplash.com/random?sig={{randomNumber}}" class="card-img">
            </div>
            <div class="col-md-8 ">
                <div class="card-body"><h5 class="card-title"><input (click)="componentDelete(task._id)" id="delete-me" class="checkbox mr-2" type="checkbox">Title: {{task.title}}</h5>
                    <p class="card-text">Description: {{task.description}}</p>
                    <p class='card-title'>Due Date: <small class='bold'> {{task.dueDate | date:"fullDate"}}</small></p>
                    <button (click)="componentGetTask(task._id)" class="btn btn-primary float-left mr-3">Edit</button>
                    <button class='btn btn-danger'>Add</button>
                </div>
            </div>
        </div>
    </div>
</div>

我想要成功的结果是，通过使用 unsplash 网站，显示的每个任务都有不同的图像。非常感谢您的帮助:->

Answer 1

范,

您只在组件初始化时生成一次随机数。

ngOnInit() {
  this.componentGetAllTasks();
  this.randomNumber = (Math.floor(Math.random()*10));
}

表达式(Math.floor(Math.random()*10)) returns 一个介于0和9之间的整数，它存储在this.randomNumber中。顺便说一句，您不能像在方法 componentGetAllTasks() 中那样将运行 this.randomNumber 作为函数，因为它不是函数。

所以你总是得到相同的图像，因为你只生成了一次随机数。要解决此问题，您需要为任务的每个条目生成此编号。你可以有一个方法 returns 一个随机数

getRandomNumber() {
  return (Math.floor(Math.random()*10));
}

并将此方法添加到您的模板

<img src="https://source.unsplash.com/random?sig={{getRandomNumber()}}" class="card-img">

记住这个returns是一个随机数，意思是你可以多次得到同一个数字。

如何使用 unsplash 在循环中生成不同的随机图像

How to use unsplash to generate different random images within a loop

angular

mean-stack