Angular中SVG水填充动态效果按索引匹配湿度值的问题求助

我来帮你搞定这个问题～你当前遇到的核心问题是用单个变量存储湿度值，循环时会不断覆盖之前的内容，最后自然只剩下最后一条数据的结果。咱们换个思路，直接让每个SVG项和数组里的对应数据绑定就行，具体步骤如下：

1. 调整组件逻辑（简化版） #

其实你完全不需要单独的humidityPercentage变量，直接在模板里遍历数据数组就能拿到对应项的湿度值。修改后的组件代码如下：

data = [
  { name: 'server1', humidity: '50.9' },
  { name: 'server2', humidity: '52.9' },
  { name: 'server3', humidity: '53.9' }
];

constructor() { }

ngOnInit() {
  // 这里不需要额外循环处理，直接交给模板遍历即可
}

如果需要提前统一处理所有湿度值（比如转成数字加百分号），也可以把humidityPercentage改成数组：

data = [
  { name: 'server1', humidity: '50.9' },
  { name: 'server2', humidity: '52.9' },
  { name: 'server3', humidity: '53.9' }
];
humidityPercentages: string[] = [];

constructor() { }

ngOnInit() {
  // 用map方法批量处理，避免手动循环的越界问题
  this.humidityPercentages = this.data.map(item => `${item.humidity}%`);
}

2. 模板中绑定对应数据 #

在HTML模板里用*ngFor遍历你的data数组，让每个SVG水填充项和当前迭代的数组项绑定：

<!-- 遍历data数组，每个item对应一个服务器的湿度数据 -->
<div *ngFor="let item of data; let index = index" class="humidity-item">
  <p>{{ item.name }} 湿度</p>
  <!-- 假设你的SVG水填充组件需要接收百分比数值，直接绑定item.humidity -->
  <svg-water-fill 
    [fillValue]="item.humidity"
    [displayText]="`${item.humidity}%`"
  ></svg-water-fill>
  
  <!-- 如果用提前处理好的humidityPercentages数组，也可以这样绑定 -->
  <!-- <svg-water-fill 
    [fillValue]="humidityPercentages[index]"
  ></svg-water-fill> -->
</div>

为什么之前的代码不行？ #

你原来的循环x <= this.data.length不仅会导致数组越界（数组索引是从0到length-1），而且每次循环都把单个变量humidityPercentage覆盖成当前项的值，循环结束后自然只保留最后一次赋值的结果。改成数组存储或者直接模板遍历，就能让每个SVG项对应到数组里的对应索引数据了。

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