javascript - 如何在 litelement 组件中显示对象
问题描述
我想知道如何在 lit-element 组件中显示两个不同的对象值
render() {
${this.providerList.map(function (provider) {
${this.query.map(function (query) {
return html`
<div class="card mb-4" style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);border: none">
<div class="card-body p-0">
<div class="row m-2">
<div class="col-sm-4">
<p>${provider.name} ${query.value}</p>
</div>
</div>
</div>
</div>
})}
`;})}
}
import { LitElement, html, css } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
export class Provider extends LitElement {
constructor(){
super();
this.providerList=[
{
id="1", name="fund" ,description: "Raising Funds"
},
{
id="2", name="transfer" ,description: "transfering money"
}
];
this.query=
{
value: "200", country:"SG"
}
}
render() {
${this.providerList.map(function (provider) {
${this.query.map(function (query) {
return html`
<div class="card mb-4" style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);border: none">
<div class="card-body p-0">
<div class="row m-2">
<div class="col-sm-4">
<p>${provider.name} ${query.value}</p>
</div>
</div>
</div>
</div>
})}
`;})}
}
}
预期输出
在渲染 html 中显示两个不同的对象值。
解决方案
您的每个匿名函数都需要返回一个字符串,并且由于它们使用.map
您需要使用.join('')
从数组转换为字符串。
请参见下面的示例:
let providerList = [
{
id: "1",
name:"fund",
description: "Raising Funds"
},
{
id: "2",
name: "transfer",
description: "transfering money"
}
];
let query = [
{
value: "200", country:"SG"
}
]
let holder = document.querySelector('.holder');
holder.innerHTML = providerList.map(
function (provider) {
return query.map(
function (query) {
return `
<div class="card mb-4" style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);border: none">
<div class="card-body p-0">
<div class="row m-2">
<div class="col-sm-4">
<p>${provider.name} ${query.value}</p>
</div>
</div>
</div>
</div>`;
}
).join('');
}
).join('');
<div class="holder"></div>
是的,我删除了代码的 LITism,但这应该向您展示它是如何工作的,然后您可以将其放回您的render
函数中。
推荐阅读
- caching - Laravel 缓存 DatabaseStore 清理
- facebook - 如何开发需要 Facebook Graph API 权限但在开发过程中被禁用的功能?
- python - Python 3,tkinter,小部件未显示
- php - Laravel 5.7 登录没有重定向或错误
- android - Android BLE 怎么能读取超过 20 个字节,requestMtu() 不起作用?
- html - 如何在 Angular 中做手风琴
- linux - 变量和双引号
- google-api - 当我使用 Drive API 连接到帐户时,我收到一封电子邮件,其中 Appname 为“QuickStart”
- php - 如何将来自 ajax 的响应数据填充到选择下拉列表中?
- react-native - 如何在反应原生的反应导航中从子选项卡导航器访问父路由