Angular表格下载按钮重复显示问题求助：如何移除多余的下载图标

嘿，我一眼就瞅出问题所在啦！你看第三列的按钮标签里，多写了一个*ngFor="let user of users"——外层的<tr>已经在遍历整个users数组了，每一行对应一个user对象，结果你在按钮这里又循环了一遍所有用户，这就导致每一行的下载按钮会重复渲染成和用户数量一样多的图标，可不就乱了嘛！

只需要把按钮上多余的*ngFor删掉就行，直接用当前行的user对象来调用方法：

<tr *ngFor="let user of users">
  <td>
    <h6 class="font-medium">{{user.id}}</h6>
  </td>
  <td>
    <h6 class="font-medium">{{user.totalPrice}}</h6>
  </td>
  <td>
    <button type="button" (click)="downloadJson(user.id)"><i>icon</i></button>
  </td>
</tr>

你的TypeScript方法downloadJson是没问题的，它会根据传入的userId找到对应的用户并生成下载文件。修正后每一行只会显示一个属于当前用户的下载按钮，不会再重复啦～

备注：内容来源于stack exchange，提问作者Gledi