时间戳

首页 > 解决方案 > 使用 lit-html 从 Promise 渲染数组，直到

es6-promise - 使用 lit-html 从 Promise 渲染数组，直到

问题描述

我正在尝试使用 lit-html 及其直到语法呈现一些 HTML。我必须承认，承诺让我感到沮丧，但我是一名后端开发人员，所以这归结为我缺乏知识。任何帮助将不胜感激。

我的代码

... removed for brevity ...

    async getCenters() {
        try {
            return await this.centerManager.allCenters;
        }
        catch (error) {
            return error;
        }
    }

    createView() {
        return html`
        <style>
            h2 {
                color: var(--ptsi-gold);
                font-family: 'Helvetica Neue Medium';
                font-size:1.4em;
            }

            p {
                font-family: 'Helvetica Neue Roman';
                font-size:1em;
            }

            .wrapper {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .tile {
                background: var(--ptsi-gray);
                padding: 25px;
                margin: 25px 0px 25px 0px;
            }
        </style>
        <div class="wrapper">
            <div class="tile">
                <h2>This is a Hard Typed Title</h2>
                <p>This is a Hard Typed Body.</p>
            </div>
        </div>
        ${until(this.getCenters().then((data) => {
            data.forEach(element => {
                html`<div class="wrapper">
                        <div class="tile">
                            <h2>${element.program_code}</h2>
                            <p>${element.program_name}</p>
                        </div>
                    </div>
                `
            })
        }), html`<span>Loading...</span>`)
            }`
    }
}

... removed for brevity ...

当页面加载时，我正在遍历数组并且可以检查这些值。此外，我在调试器中看到了 Loading...，但 html`` 永远不会在 until() 函数中呈现内容。

标签： es6-promiselit-html

解决方案

第一个论点until是不解决任何内容。更新函数以返回值并使用map而不是forEach.

until(this.getCenters().then((data) => {
  return data.map(element => {
    return html`<div class="wrapper">
      <div class="tile">
        <h2>${element.program_code}</h2>
        <p>${element.program_name}</p>
      </div>
    </div>`
  })
}), html`<span>Loading...</span>`)

推荐阅读