点击label元素时绑定变量值异常变更问题求助

看起来你遇到的问题核心在于重复的id和for属性导致label与input的关联错误，结合你的日志输出（点击不同label时test函数拿到正确的n，但onFileSelect始终拿到3），大概率你是在*ngFor循环中渲染这些上传控件——而所有input的id都设为了uploadFile，对应的label的for也都是这个值。浏览器在处理重复id时，会把for关联到最后一个匹配id的元素，所以不管你点击哪个label，触发的都是最后一个input的change事件，自然拿到的n和this.uploadDocumentTypeId都是最后一次循环的值（也就是3）。

而label的click事件是直接绑定在当前循环的uploadDocumentTypeId上的，所以能正确拿到对应的值，这就出现了日志里的矛盾现象。

修复步骤 #

1. 给每个input设置唯一的id，结合你的uploadDocumentTypeId生成唯一标识：

<input 
  id="uploadFile-{{uploadDocumentTypeId}}" 
  #inputFile 
  type="file" 
  ng2FileSelect 
  [uploader]="uploader" 
  (change)="onFileSelect($event, uploadDocumentTypeId)" 
/>

2. 同步修改label的for属性，让它关联到对应input的唯一id：

<label 
  for="uploadFile-{{uploadDocumentTypeId}}" 
  (click)="test(uploadDocumentTypeId)" 
  class="job-btn btn btn-outline-primary small-width"
>
  Select
</label>

为什么去掉label就正常？ #

当你移除label后，是直接点击对应的input元素，此时触发的是当前input的change事件，绑定的uploadDocumentTypeId是当前循环项的值，所以能拿到正确的结果。

额外优化建议 #

如果你的代码是在*ngFor中循环渲染，建议同时给循环项加上trackBy，避免Angular不必要的DOM重渲染，也能进一步确保变量绑定的正确性：

// 在组件类中添加trackBy函数
trackById(index: number, item: any): number {
  return item.uploadDocumentTypeId; // 返回循环项中唯一标识字段
}

然后在模板中使用：

<div *ngFor="let item of yourUploadItems; trackBy: trackById">
  <!-- 你的input和label放在这里 -->
</div>

内容的提问来源于stack exchange，提问作者Waqas A.M. Siddiqui