Electron.js中如何向表格导入数据？遇ts(2657)错误求助

错误原因分析 #

ts(2657)错误的核心是用单引号包裹了模板字符串，TypeScript要求模板字符串必须使用反引号（）才能支持${}`变量插值。同时代码里还有其他语法问题：

• 非法属性访问：order.'shipping'写法错误，应改为order.shipping
• 只创建了tr元素和内容字符串，但未将内容插入tr，也没把tr添加到页面表格中

修正后的代码 #

const sideMenu = document.querySelector("aside");
const menuBtn = document.querySelector("#menu-btn");
const closeBtn = document.querySelector("#close-btn");
const themeToggler = document.querySelector(".theme-toggler");
// 假设页面存在id为orders-table的表格tbody
const ordersTableBody = document.querySelector("#orders-table tbody");

// 显示侧边栏
menuBtn.addEventListener('click', () => {
    sideMenu.style.display = 'block';
})

// 关闭侧边栏
closeBtn.addEventListener('click', () => {
    sideMenu.style.display = 'none';
})

// 切换主题
themeToggler.addEventListener('click', () => {
    document.body.classList.toggle('dark-theme-variables');

    themeToggler.querySelector('span:nth-child(1)').classList.toggle('active');
    themeToggler.querySelector('span:nth-child(2)').classList.toggle('active');
})

// 示例订单数据（如果你的代码未定义Orders，需补充实际数据）
// const Orders = [
//   { productName: "商品A", productNumber: "SKU001", paymentStatus: "已支付", shipping: "已发货" },
//   { productName: "商品B", productNumber: "SKU002", paymentStatus: "待支付", shipping: "pending" },
//   { productName: "商品C", productNumber: "SKU003", paymentStatus: "已支付", shipping: "Declined" }
// ];

// 填充表格订单数据
Orders.forEach(order => {
    const tr = document.createElement('tr');
    // 用反引号包裹模板字符串，修正属性访问写法
    const trContent = `
        <td>${order.productName}</td>
        <td>${order.productNumber}</td>
        <td>${order.paymentStatus}</td>
        <td class="${order.shipping === 'Declined' ? 'danger' : order.shipping === 'pending' ? 'warning' : 'primary'}">${order.shipping}</td>
        <td class="primary">Details</td>
    `;
    // 将内容注入行元素
    tr.innerHTML = trContent;
    // 将行添加到表格tbody
    ordersTableBody.appendChild(tr);
})

关键修改点 #

• 替换单引号为反引号包裹模板字符串，解决ts(2657)错误
• 修正order.'shipping'为order.shipping，修复属性访问语法问题
• 添加tr.innerHTML = trContent将内容插入行元素
• 获取表格tbody节点，通过appendChild将行添加到表格中
• 补充Orders数组示例定义（需根据实际业务数据调整）

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