как отображать объекты в компоненте litelement

Я хотел бы знать, как отобразить два разных значения объекта в компоненте светового элемента.

 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.


javascript web-component lit-element lit-html
person mia    schedule 27.03.2019    source источник
comment
this.query - это объект, поэтому он не поддерживает .map. Кроме того, .map возвращает массив. Так что вы, вероятно, захотите сделать .map(<code here>).join(''), чтобы преобразовать его в строку.   -  person Intervalia    schedule 27.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

Каждая из ваших анонимных функций должна возвращать строку, и, поскольку они используют .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>

Да, я удалил ЛИТизм кода, но это должно показать вам, как это работает, а затем вы можете вернуть это в свою render функцию.

person Intervalia    schedule 27.03.2019