Блог

Главная - Вопросы по программированию - как отображать объекты в компоненте litelement

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

#javascript #web-component #lit-element #lit-html

#javascript #веб-компонент #lit-элемент #lit-html

Вопрос:

Я хотел бы знать, как отобразить два разных значения объекта в компоненте 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.

Комментарии:

1. this.query является объектом, поэтому он не будет поддерживаться .map . Кроме того, .map возвращает массив. Поэтому вы, вероятно, захотите сделать .map(<code here>).join('') , чтобы преобразовать это в строку.

Ответ №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>

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