Angular列表不同条目点击下载对应不同URL该如何实现？

解决方案 #

1. 调整列表数据结构 #

首先给reports数组的每个条目新增downloadUrl字段，存储对应条目的下载地址，示例结构如下：

// 组件中reports数组的结构示例
reports = [
  {
    id: 1,
    heading: '报告1',
    subheading: '报告1描述',
    downloadUrl: 'https://tbapi.truckbuddy.co.in/xxx/report1' // 每个条目对应唯一的下载URL
  },
  // 剩余7个条目按同样结构配置各自的downloadUrl即可
]

2. 修改HTML模板绑定点击事件 #

如果不需要原有的跳转逻辑，可以直接把[routerLink]替换为点击事件绑定，将当前点击的条目作为参数传入下载方法；如果需要保留跳转逻辑，两个属性可以共存：

<div class="card border-0 p-3">
  <div class="row" >
    <div class="col-md-6 col-sm-12 " *ngFor="let item of reports">
      <button class="btn btn-white w-100 lh-1  col " (click)="getFile(item)">
         <div class="row pl-3 lh-1"> 
            <h5 class="fw-bolder fs-5 ">{{item.heading}}</h5>
         </div>
          <div class="row pl-3 lh-1">
            <h6 class="">{{item.subheading}}</h6>
          </div>
      </button>
    </div> 
  </div>
</div>

3. 改造组件中的下载方法 #

修改getFile方法接收当前点击的条目作为参数，读取条目中的downloadUrl作为请求地址：

getFile(item: any) {
   // 直接从传入的item对象中取对应条目的专属下载URL
   let url = item.downloadUrl;
   let body = this.reportservice.time;
   return this.reportservice.downloadReport(url,body)
      .subscribe(
        data => {
          saveAs(data);
        },
        error => {
          this.show()
          console.log(error);
        }
      )
}

可选优化方案 #

如果8个下载URL的域名前缀完全一致，只有路径后缀不同，可以不用在每个item里存完整URL，只需要存对应的后缀标识，在getFile方法里拼接完整URL即可，减少冗余代码：

// reports里只存路径后缀
reports = [
  {id:1, heading:'报告1', subheading:'xxx', urlSuffix:'bookingRequest/search/report'}
]

// getFile里拼接完整URL
let url = `https://tbapi.truckbuddy.co.in/${item.urlSuffix}`

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