javascript - lit-element:无法获取对象数组以循环呈现输出

Question

刚从 lit-element 开始

在我的渲染中我有:

  return html`
   ${this.jobCreate}
   ${this.jobDetails}
  `;

get jobCreate 工作正常

这是我的工作详情:

  get jobDetails() {
    const jobs = [
      { name: "phoenix job", location: "phoenix", expires: "2020-10-01" },
      { name: "chicago job", location: "chicago", expires: "2020-10-01" },
      { name: "pittsburgh job", location: "pittsburgh", expires: "2020-10-01" },
    ];

    return html`<ul>
      ${jobs.forEach((job) => html`<li>${job.name}</li>`)}
    </ul>`;
  }

检查元素我可以看到一个空的 <ul>设置

如果做 <ul><li>${jobs[2].name}</li></ul>行得通

如果我控制作业，我可以在循环中看到所有正确的作业打印 3 次

我不明白为什么我无法获得 <li>在循环中渲染

我用这个作为引用:https://lit-element.polymer-project.org/guide/templates#template-syntax-cheat-sheet

Answer 1

您正在使用 forEach 而不是 map 来循环 jobs 数组。 forEach 返回 undefined 而 map 返回一个新数组，每个值都根据给定的函数映射。

作为另一种思考方式，如果您取出模板文字标签并在值为 undefined 时输出字符串 'undefined'， forEach 将输出以下内容:

<ul>
     undefined
</ul>

而 map 会输出:

<ul>
    <li>phoenix job</li><li>chicago job</ul><ul>pittsburgh job</ul>
</ul>

以下可能是您的目标:

get jobDetails() {
    const jobs = [
        { name: "phoenix job", location: "phoenix", expires: "2020-10-01" },
        { name: "chicago job", location: "chicago", expires: "2020-10-01" },
        {
            name: "pittsburgh job",
            location: "pittsburgh",
            expires: "2020-10-01",
        },
    ];

    return html`<ul>
        ${jobs.map((job) => html`<li>${job.name}</li>`)}
    </ul>`;
}

进一步阅读:

• MDN on map
• MDN on forEach