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>

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

Answer 1

Pham，

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

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

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

因此您总是会得到相同的图像，因为您只生成了randomNumber一次。要解决此问题，您需要为每个任务条目生成此数字。您可能有一个返回随机数的方法

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

并将此方法添加到模板中

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

请记住，这将返回一个随机数，这意味着您可以多次获得相同的数字。

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

1 个答案: