Я хочу отобразить некоторые элементы html, которые я получаю с моего веб-сервера в LitElement - PullRequest
Новая
       34

Я хочу отобразить некоторые элементы html, которые я получаю с моего веб-сервера в LitElement

2 голосов
/ 29 апреля 2020

Я хочу получить HTML элементов с веб-сервера и отобразить их в моем веб-компоненте с помощью LitElement. Мои элементы сохраняются в виде строк в MongoDB, например, элемент <div> do something</div>.

Я уже получил элементы с XMLHttpRequest, но не могу присвоить их моему свойству и отобразить их. 

import { LitElement, html } from 'lit-element';
class CassKomponent extends LitElement {
  static get properties() {
    return {
      url: { type: String },
      myArray: { type: Array },
    };
  }
  constructor() {
    super();
    this.url = 'url';
    this.myArray = [];
    this.getResource;
  }
  render() {
    return html`
      <div id="check"></div>
      <div>${this.url}</div>
      <ul>
        ${this.myArray.map((i) => html`<li>${i}</li>`)}
      </ul>
    `;
  }

  getResource() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', this.url, true);
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(this.responseText);
        console.log(response);
        //tried this one and it doesn't work
        //document.querySelector('.heck').innerHTML = xhttp.responseText;
        this.myArray = response;
      }
    };
    xhttp.send();
  }
}

customElements.define('cass-komponent', CassKomponent);

Ответы [ 2 ]

1 голос
/ 04 мая 2020

Редактировать:

Я неправильно понял, где была проблема, я пропустил ее в сети, запрашивающей деталь.

Если возможно, я бы предложил использовать fetch() вместо XMLHttpRequest(), поскольку это облегчит написание ... и отладку. Что бы вы подумали: 

async getResource() {
  let response = await fetch(this.url);
  let jsonResponse = await response.json();
  console.log(jsonResponse);
  this.myArray =jsonResponse;
}

Дополнительная информация о fetch() на MDN-сайте

Если вы хотите визуализировать элемент HTML (и вы Вы уверены, что это безопасно), вы можете использовать директиву unsafehtml от lit- html при рендеринге.

При рендеринге вы можете использовать: 

  render() {
    return html`
      <div id="check"></div>
      <div>${this.url}</div>
      <ul>
        ${this.myArray.map((i) => html`<li>${unsafeHTML(i)}</li>`)}
      </ul>
    `;
  }

Будет ли это решением в вашем случае?

0 голосов
/ 08 мая 2020

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

render() {
    return html `
        <div id='placeholder'> </div>
    `;
}

async getResource() {
    fetch(this.url)
        .then((response) => response.text())
        .then((responseText) => {
            this.myArray = JSON.parse(responseText);
            this.shadowRoot.getElementById('placeholder').innerHTML = this.myArray;
        })
        .catch((error) => {
            alert("The data could not be fetched");
            console.error(error);
        });
}
...