使用 html 模板标签，似乎无法显示整个信息数组

Question

这是我第一次使用html模板标签。我不知道我是否做错了，但模板的输出只显示数组中的最后一项。我试过循环通过它和foreach方法，但仍然只有最后一项显示。我知道我可能覆盖了这些项目，因为它们是堆叠在一起的，但我似乎不明白，有人能给我指出正确的方向吗?

<div class="products-container">
<template>
<div class="product">
<img class="img">
<h2 class="item-title"></h2>
<h3 class="price"></h3>
</div>
</template>
</div>
const template = document.querySelector('template').content
const copyTemplate = document.importNode(template, true)
let shoppingList = [];
async function getData(data) {

const products = data.items.map(product => {

copyTemplate.querySelector('.item-title').textContent = product.title;
copyTemplate.querySelector('.price').textContent = product.price;
copyTemplate.querySelector('.img').src = product.image;
});

document.querySelector('.products-container').appendChild(copyTemplate);
shoppingList.push(products);
return products
}

Answer 1

我明白了。我必须将模板和copytemplate放入map函数中才能使其工作。