如何在Ionic项目中将MYSQL获取的PID变量拼接至PDF访问URL中

问题原因 #

Angular 的 {{}} 插值语法仅适用于模板内容展示场景，不能直接嵌入到 (click) 这类事件绑定的内部字符串参数中。事件绑定的表达式会直接解析 TS 上下文的变量，不需要额外加插值符。

解决方案 #

方案1：直接在模板内拼接URL #

直接在事件绑定的参数里用字符串拼接语法组合固定路径和PID变量即可：

<ion-button (click)="abrirpdf('https://abcd.com/pids/RS-' + PID + '.pdf')">Open {{PID}}</ion-button>

方案2：将拼接逻辑移到TS中（更推荐，易维护） #

如果URL规则后续可能调整，把拼接逻辑放到TS代码里更方便修改：

1. 修改TS中的方法：

// TS文件
abrirpdfByPid(){
  // 用模板字符串拼接更简洁
  const targetUrl = `https://abcd.com/pids/RS-${this.PID}.pdf`;
  window.open(targetUrl, '_system', 'location=yes');
}

2. 模板直接调用该方法：

<ion-button (click)="abrirpdfByPid()">Open {{PID}}</ion-button>

注意事项 #

如果PID是异步从数据库获取的，要确保点击按钮时PID已经完成赋值，避免生成的URL出现undefined占位的异常情况。

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