应该很少有这种需求，需要在模板字符串利循环遍历数据，现在框架都有自己模板语法。
我这里踩的坑是，我在模板字符串中用forEach,map遍历循环时，返回值一直是一个undefined
用for循环return之后当条件满足时又直接跳出循环了
有大佬看到这里知道的希望能帮帮忙解答一下
代码如下：
for循环
javascript"> 这是在模板字符串中用for循环遍历
this.goodsData = [
{type: '自闭阀', userName: 'zs', userCode: '123'},
{type: '波纹管', userName: 'zs2', userCode: '142'},
{type: '报警器', userName: 'zsw', userCode: '172'},
{type: '表头', userName: 'zsf', userCode: '172'},
{type: '金属头', userName: 'zsd', userCode: '132'}
]
`
<div class="install-situation">
安装情况
</div>
${
(() => {
for (let i = 0; i < this.goodsData.length; i++) {
let item = this.goodsData[i];
if(item.type == '自闭阀') {
return `
<div class="install-item">
<div class="install-item-frist">${ item.type }</div>
<div class="install-item-isright">
<div class="install-item-top">是否正常安装</div>
<div class="install-item-bottom"></div>
</div>
<div class="install-item-common">
<div class="install-item-top">品牌名称</div>
<div class="install-item-bottom">${ item.userName || ''}</div>
</div>
<div class="install-item-common">
<div class="install-item-top">规格型号</div>
<div class="install-item-bottom">${ item.model || ''}</div>
</div>
<div style="display: flex; flex: 6;">
<div class="install-item-address">
<div class="install-item-top">备注(双螺/一螺一插)</div>
<div class="install-item-bottom"></div>
</div>
<div class="install-item-address-no-border">
<div class="install-item-top">是否进行使用培训</div>
<div class="install-item-bottom"></div>
</div>
</div>
</div>
`
}else if (item.type == '波纹管') {
return `
<div class="install-item">
<div class="install-item-frist">${ item.type }</div>
<div class="install-item-isright">
<div class="install-item-top">是否正常安装</div>
<div class="install-item-bottom"></div>
</div>
<div class="install-item-common">
<div class="install-item-top">品牌名称</div>
<div class="install-item-bottom">${ item.userName || ''}</div>
</div>
<div class="install-item-common">
<div class="install-item-top">规格型号</div>
<div class="install-item-bottom">${ item.model || ''}</div>
</div>
<div style="display: flex; flex: 6;">
<div class="install-item-address">
<div class="install-item-top">备注(双螺/一螺一插)</div>
<div class="install-item-bottom"></div>
</div>
<div class="install-item-address-no-border">
<div class="install-item-top">未安装原因</div>
<div class="install-item-bottom"></div>
</div>
</div>
</div>
`
}else {
return `
<div class="install-item">
<div class="install-item-frist">${ item.type }</div>
<div class="install-item-isright">
<div class="install-item-top">是否正常安装</div>
<div class="install-item-bottom"></div>
</div>
<div class="install-item-common">
<div class="install-item-top">品牌名称</div>
<div class="install-item-bottom">${ item.userName || ''}</div>
</div>
<div class="install-item-common">
<div class="install-item-top">规格型号</div>
<div class="install-item-bottom">${ item.model || ''}</div>
</div>
<div style="display: flex; flex: 6;">
<div class="install-item-address">
<div class="install-item-top">安装位置</div>
<div class="install-item-bottom"></div>
</div>
<div class="install-item-common">
<div class="install-item-top">通电情况</div>
<div class="install-item-bottom"></div>
</div>
<div class="install-item-end">
<div class="install-item-top">报警测试情况</div>
<div class="install-item-bottom"></div>
</div>
</div>
</div>
`
}
}
})()
}
`
我用for循环时条件满足就跳出循环了 导致只能渲染一条数据出来如图：
期望是这样的：
可是当我用forEach或者map时 ，直接给我返回一个undefind
不说完整逻辑， 就下面这一点，我在模板字符串中写也是给我返回undefind
this.goodsData.forEach((item) => {
return '哈哈哈哈或'
})
在此记录一下这个坑
难道模板字符串中不支持forEach,map等之类的遍历吗
