Angular 10中URL值无法正确填入href属性的问题求助

错误原因 #

你在原生JS代码里误用了模板语法{{crMap.url}}，JS不会解析这种语法，会直接把它当作字符串内容处理，导致最终生成的链接地址是{{crMap.url}}的URL编码结果（即%7B%7BcrMap.url%7D%7D），再拼接当前页面的基础URL后就出现了异常地址。

修正方案 #

直接通过JS变量访问crMap.url，替换掉无效的{{crMap.url}}，下面提供两种可行写法：

写法1：字符串拼接（修正原代码）

const crList = arr.map(crMap => {
  return '<a href="' + crMap.url + '" target="_blank">' + crMap.crId + '</a>'
}).filter(str => str.trim()).join(', ')
return crList;

写法2：ES6模板字符串（更简洁易读）

推荐使用这种方式，代码更清晰，不易出错：

const crList = arr.map(crMap => {
  return `<a href="${crMap.url}" target="_blank">${crMap.crId}</a>`
}).filter(str => str.trim()).join(', ')
return crList;

效果说明 #

修正后，生成的每个<a>标签的href属性都会正确指向对应crMap.url的地址，鼠标悬停时会显示正确的URL，点击后也能跳转到目标页面。

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