如何仅修改当前行的Progress Bar，不影响其他行？

嘿，这个问题我之前也碰到过！核心原因是你现在所有的进度条都共用了同一个percentage和progress全局变量，所以修改时所有行的进度都会跟着变化。下面是具体的解决方案，让每一行的进度条都能独立更新：

1. 调整组件内的数据结构 #

首先要把每个ID对应的进度数据单独存储，不再使用全局变量。比如用一个数组来保存每个条目的进度信息：

// 在你的Component类中定义
progressData: { id: number; percentage: string; progress: number }[] = [];

// 初始化时给每个数据项设置初始进度（假设你的数据列表是dataList）
ngOnInit() {
  this.dataList.forEach(item => {
    this.progressData.push({
      id: item.key.id,
      percentage: '0%', // 初始进度百分比
      progress: 0       // 初始进度数值
    });
  });
}

2. 修改HTML模板的绑定逻辑 #

让每一行的进度条绑定对应ID的专属进度数据，而不是全局变量：

<!-- 假设你是用*ngFor循环渲染所有行 -->
<div *ngFor="let item of dataList" class="progress aqua" 
     [attr.data-width]="getProgressItem(item.key.id).percentage" 
     (mousedown)="startUpdateSlider(item)" 
     (mouseup)="endUpdateSlider(item)" 
     (mouseleave)="endUpdateSlider(item)" 
     (mousemove)="updateSlider($event, item)">
  <div class="progress-text">{{getProgressItem(item.key.id).progress}}</div>
  <div class="progress-bar" [style.width]="getProgressItem(item.key.id).percentage">
    <div class="progress-text">{{getProgressItem(item.key.id).progress}}</div>
  </div>
</div>

3. 更新进度条的控制方法 #

修改updateSlider等方法，确保只更新目标ID对应的进度数据：

currentID: number | null = null;
updateSliderToggle = false;

startUpdateSlider(data) { 
  this.currentID = data.key.id; 
  this.updateSliderToggle = true; 
}

endUpdateSlider(data) {
  this.updateSliderToggle = false;
  this.currentID = null;
}

updateSlider(event: MouseEvent, data) {
  // 只处理当前选中的ID
  if (!this.updateSliderToggle || this.currentID !== data.key.id) return;

  // 这里保留你原来的进度计算逻辑
  const progressBar = event.currentTarget as HTMLElement;
  const rect = progressBar.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const calcPercentage = `${Math.max(0, Math.min(100, (x / rect.width) * 100))}%`;
  const calcProgress = Math.round((x / rect.width) * 100);

  // 找到对应ID的进度数据并更新
  const targetItem = this.progressData.find(item => item.id === data.key.id);
  if (targetItem) {
    targetItem.percentage = calcPercentage;
    targetItem.progress = calcProgress;
  }
}

// 辅助方法：根据ID获取对应的进度数据
getProgressItem(id: number) {
  return this.progressData.find(item => item.id === id) || { percentage: '0%', progress: 0 };
}

关键要点总结 #

• 数据隔离：每个进度条对应独立的进度数据对象，不再共用全局变量
• 精准更新：在更新方法中只修改当前选中ID对应的进度数据
• 模板绑定：通过辅助方法快速找到对应ID的进度数据，确保模板绑定的是专属数据

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