0

我对此感到头疼，如果有人知道如何解决它，那就太棒了。我正在使用 LitElement 创建一个表格组件，想要使用它的开发人员可以添加一个 customHTML 来呈现不同的输入。为此，他/她可以使用属性“headers”，如下所示：

[{
  label: 'Created at',
  customHTML: (value, isEditable) => html`<custom-element .value="${value} .isEditable="${valueisEditable}"></custom-element>`
}]

使用内部组件：

<td>${header.customHTML()}</td>

我面临的问题是当我尝试在我的表格组件中使用这个 customHTML 时，它正在返回 [object Object]。你对此有什么解释吗？有可能解决这个问题吗？

谢谢！

4

3 回答 3

0

这是因为您使用了许多版本的 lit-element。

输入 chrome 控制台window.litElementVersions，您将看到您使用的是哪个版本的 lit 元素。

如果您将html来自不同版本的不同导入的标签混合在一起，您将得到[object Object].

解决方案

这里没有什么神奇的，也没有什么可做的。再次安装所有软件包

rm -rf node_modules yarn.lock package-lock.json
npm i
# or
yarn install
于 2021-05-27T04:33:09.977 回答
0

没有太多代码可以真正理解问题，但尝试使用JSON.stringify(customHTML).

作为字符串，打印为文本会更加灵活。

于 2021-05-26T15:47:57.943 回答
0

[object Object]是转换为字符串的对象的默认表示。

const house = {
  windows: 4,
  height: 5
}

console.log(house.toString());

自定义 html 元素是您在<td>标签内引用的对象，它可能试图将其转换为字符串。

于 2021-05-26T15:47:03.617 回答