0

我想知道如何在 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 中显示两个不同的对象值。

4

1 回答 1

1

您的每个匿名函数都需要返回一个字符串，并且由于它们使用.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函数中。

于 2019-03-27T17:17:54.163 回答