Angular实现点击按钮随机展示图片功能失败问题求助

• 报错核心原因1：newGame 方法定义了要求传入imageList参数，但你在模板点击调用时没有传任何参数，运行时方法内的imageList为undefined，访问undefined.length就会触发你截图里的报错。
• 功能失效核心原因2：你随机取出了数组内的图片对象，但没有赋值给和模板绑定的响应变量，也没有在模板里写展示图片的标签，就算方法不报错也没法渲染出图片。

修复后完整代码 #

组件TS代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }

  public imageList: Array<any> = [
    {"id" : 1, "Url" :"../assets/images/1.png"}, 
    {"id" : 2, "Url" :"../assets/images/2.png"}, 
    {"id" : 3, "Url" :"../assets/images/3.png"}, 
    {"id" : 4, "Url" :"../assets/images/4.png"},
    {"id" : 5, "Url" :"../assets/images/5.png"},
    {"id" : 6, "Url" :"../assets/images/6.png"} 
  ];
  // 新增和模板绑定的当前展示图片地址变量
  public currentImgUrl: string = this.imageList[0].Url;

  newGame() {
    // 直接读取组件内的imageList，不需要额外传参
    const randomIndex = Math.floor(Math.random()*this.imageList.length);
    // 把随机取到的图片地址赋值给绑定变量
    this.currentImgUrl = this.imageList[randomIndex].Url;
  }
}

组件HTML代码 #

<!-- 新增图片展示标签，动态绑定图片地址 -->
<img [src]="currentImgUrl" alt="随机图片">
<div class="btn">
    <button (click)="newGame()" class="btnNew">New Game</button>
</div>

内容的提问来源于stack exchange，提问作者Bachir