Angular 8数组对象图片无法显示及切换功能实现求助

看起来你遇到的问题主要是组件类与模板的绑定逻辑没打通，加上图片src的绑定方式不够规范，我来一步步帮你解决：

第一步：完善组件类（.ts文件）的逻辑 #

你需要在组件类里维护一个「当前显示的对象」变量，以及切换下一个对象的方法：

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

@Component({
  selector: 'app-your-component', // 替换成你的组件实际选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 你的原始数组
  send = [ 
    {"id":1, "img":"assets/level/1.jpg"}, 
    {"id":2, "img":"assets/level/2.jpg"}, 
    {"id":3, "img":"assets/level/3.jpg"}, 
    {"id":4, "img":"assets/level/4.jpg"}, 
    {"id":5, "img":"assets/level/5.jpg"}, 
    {"id":6, "img":"assets/level/6.jpg"}, 
    {"id":7, "img":"assets/level/7.jpg"}, 
    {"id":8, "img":"assets/level/8.jpg"}, 
    {"id":9, "img":"assets/level/9.jpg"}, 
    {"id":0, "img":"assets/level/0.jpg"},
  ];

  // 当前显示对象的索引
  currentIndex = 0;
  // 当前要显示的对象（初始取数组第一个元素）
  currentLevel = this.send[this.currentIndex];

  // 切换到下一个对象的方法
  nextLevel() {
    // 索引自增，取模实现循环切换（到最后一个后回到第一个）
    this.currentIndex = (this.currentIndex + 1) % this.send.length;
    // 更新当前显示的对象
    this.currentLevel = this.send[this.currentIndex];
  }
}

第二步：修正模板（HTML）的绑定 #

你之前用{{level.img}}找不到值，是因为组件里没有定义level变量，而且图片src推荐用Angular的属性绑定（更可靠），同时给按钮绑定点击事件：

<div class="w3-col s12 m6 l6" id="level">
 <div id="test">
 <!-- 用属性绑定[src]绑定到组件里的currentLevel.img -->
 <img class="w3-round w3-mobile" width="500" height="300" [src]="currentLevel.img" alt="Level Image">
 <input class=" w3-margin-top w3-mobile w3-section" id="testQue" style="width:400px; height: 50px; align-content: center" type="text">
 <!-- 绑定点击事件到nextLevel方法 -->
 <button id="check" class="w3-btn w3-round w3-brown w3-margin-left w3-mobile" (click)="nextLevel()">SUBMIT</button>
 </div>
</div>

关键问题说明 #

1. 变量绑定匹配：模板里用的变量必须和组件类里定义的变量完全一致，你之前写的level在组件里没定义，所以无法取值，换成currentLevel就对应上了。
2. 图片src的绑定方式：虽然插值{{}}也能凑合用，但Angular官方更推荐用[src]属性绑定，它会自动处理安全校验和值的变化监听，避免出现无效的src路径。
3. 循环切换逻辑：用(this.currentIndex + 1) % this.send.length可以让索引在数组长度范围内循环，点击到最后一个对象后会自动回到第一个。

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