Angular数组元素滑块异常：点击失效且索引0无内容显示

当前实现的数组元素轮播滑块存在两个问题：点击NEXT按钮到索引0时无内容显示，且点击操作有时失效。以下是修复方案，确保能完整显示所有数组元素（含索引0），且点击操作始终有效。

原代码问题分析 #

原TypeScript代码 #

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

@Component({
  selector: 'app-my',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class CalendarDay {

  d = new Date();
  monthNames = ["1January", "2February", "3March", "4April", "5May", "6June",
    "7July", "8August", "9September", "10October", "11November", "12December"];

  index: number = 1
  i: number = -1;
  shMonth = this.monthNames[0];

  next() {
    this.shMonth = this.monthNames[this.index++];
    if (this.index === 12) {
      this.index = 0;
    }
  }
  prev() {
    this.shMonth = this.monthNames[this.index + this.i];
    this.index--;
    if (this.index === 0) { this.index = 12 }

    if (this.index === -1) { this.index = 12 }
  }
}

原HTML代码 #

<h1>{{shMonth}}</h1>
<p>index:{{ index }}</p>
<button (click)="next()">NEXT</button>
<button (click)="prev()">PREV</button>

问题点：

• NEXT按钮问题：next()方法先赋值this.monthNames[this.index++]，当index为11时，index++变成12，此时访问monthNames[12]会得到undefined（数组最大索引是11），之后才将index设为0，导致索引0对应元素无法正常显示。
• PREV按钮问题：逻辑混乱，使用多余的i变量，索引重置逻辑重复且错误（将index设为12，超出数组索引范围），导致点击时出现无效或错误显示。

修复后的代码 #

修复后的TypeScript代码 #

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

@Component({
  selector: 'app-my',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class CalendarDay {
  d = new Date();
  monthNames = ["1January", "2February", "3March", "4April", "5May", "6June",
    "7July", "8August", "9September", "10October", "11November", "12December"];

  index: number = 0; // 初始化为0，对应第一个元素
  shMonth = this.monthNames[this.index];

  next() {
    // 先更新索引，确保在数组范围内循环
    this.index = (this.index + 1) % this.monthNames.length;
    this.shMonth = this.monthNames[this.index];
  }

  prev() {
    // 处理向前循环，避免索引为负数
    this.index = (this.index - 1 + this.monthNames.length) % this.monthNames.length;
    this.shMonth = this.monthNames[this.index];
  }
}

修复后的HTML代码（无需修改） #

<h1>{{shMonth}}</h1>
<p>index:{{ index }}</p>
<button (click)="next()">NEXT</button>
<button (click)="prev()">PREV</button>

修复说明 #

• 初始化index为0，与初始显示的shMonth对应，逻辑更统一。
• next()方法使用取模运算(this.index + 1) % this.monthNames.length，确保索引始终在0到monthNames.length-1之间，避免越界。
• prev()方法通过(this.index - 1 + this.monthNames.length) % this.monthNames.length处理向前循环，先加数组长度再取模，避免出现负数索引。
• 移除了无用的i变量，简化逻辑，减少出错点。

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