typescript 如何随机显示图像的Angular ？

yfjy0ee7 于 2022-12-14 发布在 TypeScript

关注(0)|答案(1)|浏览(133)

我有一个数组的图像，我希望他们在UI中随机显示。
已尝试typescrip中的以下代码，但innerHTML出现错误。

randomPic(){
    this.randomNum= Math.floor(Math.random() * this.myPix.length);
    console.log(this.randomNum)
    return  document.getElementById('myPicture').innerHTML= '<img src="'+this.myPix[randomNum]+'" />'; 
  }

有人能帮我看看我哪里做错了吗？

typescript

来源：https://stackoverflow.com/questions/74771898/how-to-randomly-display-images-in-angular

1条答案

按热度按时间

xytpbqjk1#

您不应该在Angular 上下文中使用document.getElementById。通常，您可以通过将数据从组件绑定到模板来实现所需的功能（反之亦然）。

import { Component } from '@angular/core';
@Component({
  selector: 'app-foobar',
  template: `
    <img [src]="myPix[randomNumber]" />
  `,
})
export class FoobarComponent {
  readonly myPix = [
    'https://via.placeholder.com/150',
    'https://via.placeholder.com/200',
    'https://via.placeholder.com/350',
    'https://via.placeholder.com/400',
  ];

  randomNumber = Math.floor(Math.random() * this.myPix.length);
}

在本例中，我们使用了属性绑定（[src]）。

赞(0）回复(0）举报 2022-12-14

我来回答

typescript 如何随机显示图像的Angular ？

1条答案

相关问题

热门标签

最新问答