gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 19:28:51 28 4
gpt4 key购买 nike

刚从 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

最佳答案

您正在使用 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>`;
}

进一步阅读:

关于javascript - lit-element:无法获取对象数组以循环呈现输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62110373/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com