как отображать объекты в элементе litelement - PullRequest
Новая
       46

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

0 голосов
/ 27 марта 2019

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

 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.

1 Ответ

1 голос
/ 27 марта 2019

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

...