Angular组件点击事件触发后.ts变量未更新问题排查

HTML里的球场名称能随contador计数器正常切换，但TS代码中控制日历时段的判断条件if(cancha.name === this.canchas[this.contador])始终停留在索引0的值，核心原因是该判断逻辑没有在contador更新后重新执行。比如判断逻辑仅在组件初始化阶段（如ngOnInit）执行过一次，后续计数器变化时没有触发逻辑更新。

1. 封装判断逻辑为方法，计数器更新时触发 #

把日历时段的过滤逻辑抽成独立方法，每次点击箭头更新计数器后调用该方法，重新计算要显示的时段：

// 组件类代码
contador = 0;
canchas: string[] = []; // 存储球场名称的数组
todosLosHorarios: any[] = []; // 所有时段的原始数据
horariosFiltrados: any[] = []; // 最终要显示的时段数据

ngOnInit() {
  // 调用服务获取球场数据示例
  this.canchasService.obtenerCanchas().subscribe(data => {
    this.canchas = data.map(item => item.name);
    this.actualizarHorarios(); // 初始化时执行一次过滤
  });
}

// 下一页点击事件
nextd() {
  this.contador += 1;
  if (this.contador === this.canchas.length) {
    this.contador = 0;
  }
  this.actualizarHorarios(); // 计数器更新后重新过滤
}

// 上一页点击事件（补充你缺失的逻辑）
prev() {
  this.contador -= 1;
  if (this.contador < 0) {
    this.contador = this.canchas.length - 1;
  }
  this.actualizarHorarios();
}

// 封装过滤逻辑的方法
actualizarHorarios() {
  const nombreCanchaActual = this.canchas[this.contador];
  this.horariosFiltrados = this.todosLosHorarios.filter(horario => {
    return horario.cancha.name === nombreCanchaActual;
  });
}

同时补充HTML中左侧箭头的点击事件：

<div class="col-1 text-end" id="prev">
  <span (click)="prev()">&#9664;</span>
</div>
<div class="col-2" id="nomCancha">
  <p>{{ canchas[contador] }}</p>
</div>
<div class="col-1 text-start" id="next">
  <span (click)="nextd()">&#9654;</span>
</div>

2. 使用Getter属性自动追踪变化（更简洁方案） #

如果日历时段是基于当前球场名称动态过滤的，可以用Getter属性，Angular会自动追踪contador和canchas的变化，自动更新过滤结果：

// 组件类代码
contador = 0;
canchas: string[] = [];
todosLosHorarios: any[] = [];

// 自动过滤的Getter属性
get horariosFiltrados() {
  const nombreActual = this.canchas[this.contador];
  return this.todosLosHorarios.filter(horario => horario.cancha.name === nombreActual);
}

nextd() {
  this.contador += 1;
  if (this.contador === this.canchas.length) {
    this.contador = 0;
  }
}

prev() {
  this.contador -= 1;
  if (this.contador < 0) {
    this.contador = this.canchas.length - 1;
  }
}

之后在HTML中直接使用horariosFiltrados即可，无需手动调用方法：

<!-- 示例：渲染过滤后的时段 -->
<div *ngFor="let horario of horariosFiltrados">
  {{ horario.horaInicio }} - {{ horario.horaFin }}
</div>

3. 排查值匹配问题 #

如果以上方法无效，检查this.canchas的元素是否和cancha.name完全一致：

• 确认字符串的大小写、前后空格完全匹配（比如是否存在隐性空格导致不相等）
• 在点击事件中打印对比值，快速定位问题：

nextd() {
  this.contador += 1;
  if (this.contador === this.canchas.length) {
    this.contador = 0;
  }
  console.log('当前选中球场:', this.canchas[this.contador]);
  console.log('时段关联球场:', this.todosLosHorarios[0]?.cancha.name); // 取第一个时段的球场名称对比
}

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