- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
刚从 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/
lit-html 是否有类似 React 的 ref 功能的更改?例如,在下面的伪代码中 inputRef 将是一个回调函数或一个对象 { current: ... } 其中 lit-html 可以传
我有以下 lit web 组件 在 my-element 中有一个按钮,单击时应调用父 Web 组件测试函数。 我如何使用发光元素做到这一点? 最佳答案 这可以通过使用 Property Expre
[Writing Templates] 下的主要文档提供了以下用于将事件处理程序与 lit-html 绑定(bind)的示例。 html` console.log('clicked')}>Click
我一直在学习 Polymer,这是 - 网络的 future ( lit-element & lit-html ) 我明白了点亮 html 用于使用几种有效技术的 HTML 模板。 同时点亮元素 是一
父元素(x-app标签)显示child1(x-counter),child2(child2-app)元素,每当child1有任何更改时,我也想将其更新为child2。因此,在父级中,我尝试使用 que
我想知道如何在 lit-element/lit-html 中实现引导导航栏 我在 lit-element 中创建了导航栏组件,但导航栏下拉菜单和切换功能不起作用。 我必须将固定顶部导航栏实现为 htm
我有一个相当复杂的表格,我想确保它在编辑和作为“新记录”表格时都能正常工作。实际上阻止了表单的提交,实际上将JSON发送了过来。然而,这不是重点。此外,this.record 在加载时分配(用于编
感谢您的阅读。 我是 polymer/lit-element,lit-html 的新手。我已经开始使用 PWA 入门套件。令我惊讶的是,它没有使用 polymer 元素,而是使用发光元素。 我试图应用
我想在 lit-element 中实现 lit-element-bootstrap 包。 我在控制台中收到以下错误,加载模块脚本失败:服务器以非 JavaScript MIME 类型“text/htm
我有这段代码: val df = resultsDf .withColumn("data_exploded", explode(col("data_item"))) .groupBy("dat
我有这段代码: val df = resultsDf .withColumn("data_exploded", explode(col("data_item"))) .groupBy("dat
我开始尝试 lit-html 和 lit-elements,尝试使用它,现在我遇到了问题,我无法找到如何在线发布此类代码。从未在在线平台上使用过 Node-js 包,只使用过其中的一些代码。通常我会构
我正在使用 点亮元素 通过 @open-wc并且目前正在尝试编写一组嵌套的组件,其中内部组件是 输入栏 还有一些 祖先组件 必须支持一些任意重写规则比如“不允许输入数字”。 我想弄清楚的是构建它的正确
根据文档,我无法理解它到底做了什么。 这个文档不够详细。 有例子吗? 最佳答案 文档没有那么深,因为它所做的没什么大不了的,这个装饰器所做的只是创建一个“快捷方式”,用于在元素的根上调用 queryS
我有 2 个发光元素组件。父内容是: ${this.renderChildren()} renderChildren函数正在遍历数组属性 children = [1, 2]并创建 元素。呈现的页面
在属性值更改事件上配置观察者的推荐方法。 当前使用更新的方法并循环更改有效的Properties参数。 static get properties() { return { testpro
刚从 lit-element 开始 在我的渲染中我有: return html` ${this.jobCreate} ${this.jobDetails} `; get jobCr
如果有一个列表应该从数组呈现,并且该数组将从grand-grand-grand-grand-grand-parent自定义元素传递。这会非常烦人。 是否有像 redux 一样的 lit-element
刚从 lit-element 开始 在我的渲染中我有: return html` ${this.jobCreate} ${this.jobDetails} `; get jobCr
如何使用具有对象类型属性的 Lit-element?我认为定义 myelement 有效: static get properties() { return { whales:
我是一名优秀的程序员,十分优秀!