在Javascript中更改模板字符串中复选框的三元代码

我正在使用聚合物和发光元件。在渲染函数中，我有一个模板字符串，如下所示：

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        <input
          type="checkbox"
          checked="${this.todoItem.done} ? 'true' : 'false'"
          @click="${this.changeStatus}"
        />
      </li>
    `;
  }

我犯了一个错误

TypeError:未能在“TreeWalker”上设置“currentNode”属性： 提供的值不是类型

---

您的三元代码目前没有运行，它们由“”包围，用于包围字符串。用{}括起三元代码。它会起作用的

{${this.todoItem.done} ? 'true' : 'false'} 

而不是

"${this.todoItem.done} ? 'true' : 'false'"

请点击此链接了解更多详细信息

---

看完文档后，我找到了答案：我必须使用

html

. 以下代码起作用

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        ${this.todoItem.done
          ? html`
              <input type="checkbox" checked @click="${this.changeStatus}" />
            `
          : html`
              <input type="checkbox" @click="${this.changeStatus}" />
            `}
      </li>
    `;
  }

render（）{
this.todoItem=JSON.parse（this.todoItem）；
返回html`

${this.todoItem.item}删除
${this.todoItem.done
？html`
`
：html`
`}

`;
}

更新

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        ${html`
          <input type="checkbox" ?checked="${this.todoItem.done}" @click="${this.changeStatus}" />
        `}
      </li>
    `;
  }

render（）{
this.todoItem=JSON.parse（this.todoItem）；
返回html`

${this.todoItem.item}删除
${html`
`}

`;
}

更新V2

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        <input type="checkbox" ?checked="${this.todoItem.done}" @click="${this.changeStatus}" />
      </li>
    `;
  }

render（）{
this.todoItem=JSON.parse（this.todoItem）；
返回html`

${this.todoItem.item}删除

`;
}

无法按照我提供的链接“此处的任何脚本都无法运行”。{此处运行的任何scrpt}。移除“”机柜。您提供的链接的问题是用于react的，react与JSX一起工作。此处的返回是一个字符串，因此在链接中使用条件运算符表示Inline If Else的示例将不起作用。render（）{this.todoItem=JSON.parse（this.todoItem）；返回html`

${this.todoItem.item}Remove

`；}这不起作用。无论值是真是假，都要将复选框显示为选中状态。即使我输入

checkbox=“asdfasdfads”

它也会将复选框显示为选中状态，因为它们就是这样工作的。

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        <input type="checkbox" ?checked="${this.todoItem.done}" @click="${this.changeStatus}" />
      </li>
    `;
  }