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 returns 未定义，而 map returns 一个新数组，每个值都根据给定的函数进行映射。

作为另一种思考方式，如果你取出模板文字标签并在值为 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>`;
}

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

lit-element: can't get an array of objects to render output in loop

javascript

render

typescript

lit-element

延伸阅读：