Как правильно отобразить асин c функцию? - PullRequest
Новая
       27

Как правильно отобразить асин c функцию?

0 голосов
/ 15 апреля 2020

У меня есть функция, которая выбирает объект и возвращает логическое значение из проверки указанного объекта.

Мне нужно это логическое значение, чтобы решить, какой HTML должен быть выводом моей функции render (). Когда функция, которая проверяет извлеченный объект, вызывается в моей функции render (), она всегда возвращает «неопределенное», поскольку всегда возвращает значение true.

Как мне перейти к выводу правильного значения в правильное время? Спасибо. 

    async isGreenlisted() {
        return fetch(`${WEB_SERVICE_URL}/v2/banners/${this.viewId}`)
            .then(res => {
                for (let list in res) {
                    if (res[list].isDisplayed && list === "green") {
                        console.log("green true");
                        return true;
                    }
                }
                return false;
            });
    }

    render() {
        return html`
            <style>
                paper-button {
                    color: blue;
                }
            </style>
            <div>
                ${this.isGreenlisted()
            ? html`
                            <paper-button raised @click="${this._onClick}">Disable Powered By</paper-button>
                      `
            : html`
                            <paper-button raised @click="${this._onClick}">Enable Powered By</paper-button>
                      `}
            </div>
        `;
    }
}

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Вы должны визуализировать из свойства, а не из того, что возвращает метод. Поэтому isGreenlisted() не должен возвращать логическое значение, а сохранять его в определенном свойстве.

Чтобы выполнить этот метод в первый раз, выполните его в рамках firstUpdated() метода жизненного цикла.

Всякий раз, когда свойство изменения, которые будут запускать метод render () , чтобы вы могли видеть изменения в пользовательском интерфейсе. 

import { LitElement, html, css } from 'lit-element';

class DemoElement extends LitElement {

  static get properties() {
    return {
        myVariable: { type: Boolean }
    }
  }

  constructor() {
      super();
      this.myVariable = false;
  }

  firstUpdated() {
      this._isGreenlisted();
  }

    render() {
        return html`
            <style>
                paper-button {
                    color: blue;
                }
                .red {
                    color: red;
                }
                .green {
                    color: green;
                }
            </style>
            <div>
                ${this.myVariable ? html`
                    <paper-button class="green" raised @click="${this._onClick}">Disable Powered By</paper-button>
                `
                : html`
                    <paper-button class="red" raised @click="${this._onClick}">Enable Powered By</paper-button>
                `}
            </div>
        `;
    }

    _onClick() {
        this.myVariable = !this.myVariable;
    }

    _isGreenlisted() {
        setTimeout(() => {
            fetch('https://jsonplaceholder.typicode.com/todos/1')
                .then(response => response.json())
                .then(json => {
                    if(json.userId === 1) {
                        this.myVariable = true;
                    }
                })
        }, 5000)
    }
}

window.customElements.define('my-element', DemoElement);

Вы должны увидеть красный текст, затем он станет зеленым через 5 секунд.

0 голосов
/ 15 апреля 2020

isGreenlisted() возвращает Promise, поэтому в троичном операторе вы, по сути, оцениваете само обещание, а не значение, к которому оно будет разрешено, а поскольку экземпляры классов истинны , первый шаблон всегда отображается.

Вместо этого следует дождаться результата обещания, например, с помощью директивы lit-html s until : 

import {until} from 'lit-html/directives/until';

render() {
  return html`
  ${until(
    this.isGreenlisted().then(res => res
      ? html`True`
      : html`False`),
    html`Loading...`,
  )}
  `;
}
...