渲染函数内的模板无法解析 - LitElement

Question

我试图通过 ajax 调用获取列表，但在它被解析之前，render()正在调用方法并且依赖于 Promise 的模板片段无法解析并抛出未定义。

问题：在我从 Promise 中获取数据之前，如何显示加载器？

import {

    LitElement,

    html

} from 'lit-element';

class EmpComponent extends LitElement {

    constructor() {

        super();

        this.data = this.getEmpData();

    }

    getEmpData() {

        fetch('../../../emp-data.json')

            .then(

                function(response) {

                    if (response.status !== 200) {

                        console.log('Looks like there was a problem. Status Code: ' +

                            response.status);

                        return;

                    }

                    response.json().then(data => data);

                }

            )

            .catch(function(err) {

                console.log('Fetch Error :-S', err);

            });

    }

    render() {

        <div>

            ${this.data.map(emp => emp.active ? this.dataTemplate(emp) : '')} 

        </div>

    }

}

customElements.define('emp-component', EmpComponent);

收到此错误：

Answer 1

第 1 步：创建一个js返回true或的文件false（例如 util.js）export function when(expression, truVal, falseVal) {&nbsp; &nbsp; if (expression) {&nbsp; &nbsp; &nbsp; &nbsp; return truVal();&nbsp; &nbsp; }&nbsp; &nbsp; if (falseVal) {&nbsp; &nbsp; &nbsp; &nbsp; return falseVal();&nbsp; &nbsp; }&nbsp; &nbsp; return undefined;}第 2 步：js在您的文件中导入 utilimport {&nbsp; &nbsp; LitElement,&nbsp; &nbsp; html} from 'lit-element';import {&nbsp; &nbsp; when} from 'util.js'第 3 步：在isLoading. static get properties所以在初始加载时，我们设置onload为 trueconstructorimport {&nbsp; &nbsp; LitElement,&nbsp; &nbsp; html} from 'lit-element';import {&nbsp; &nbsp; when} from 'util.js'class EmpComponent extends LitElement {&nbsp; &nbsp; static get properties() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isLoading: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: Boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; constructor() {&nbsp; &nbsp; &nbsp; &nbsp; super();&nbsp; &nbsp; &nbsp; &nbsp; this.isLoading = true;&nbsp; &nbsp; }第 4 步：一旦获取数据，我们就可以渲染 DOM。然后我们可以设置isLoading为 false 然后使用渲染 DOMwhenstatic get properties() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; isLoading: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: Boolean&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; canRender: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: Boolean&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.isLoading = true;&nbsp; &nbsp; this.canRender = false;&nbsp; &nbsp; this.data = this.getEmpData();&nbsp; &nbsp; this.isLoading = false;&nbsp; &nbsp; this.canRender = true;}render() {&nbsp; &nbsp; return html `&nbsp; &nbsp; ${when(this.isLoading,() => html`<p>Loading...</p>`)}&nbsp; &nbsp; ${when(this.canRender,() => html`<your-component></your-component>`)}&nbsp; `}这是until. 你可以从这个博客sabarinath blog获得更多细节

Answer 2

解决方案我评论了您应该进行更改的部分。你不需要对其他进口做奇怪的事情import { LitElement, html } from 'lit-element';&nbsp; &nbsp;&nbsp;class EmpComponent extends LitElement{&nbsp; &nbsp; constructor() {&nbsp; &nbsp; &nbsp; &nbsp; super();&nbsp; &nbsp; &nbsp; &nbsp; // you were returning a promise to an Array type...&nbsp; &nbsp; &nbsp; &nbsp; // this.data = this.getEmpData();&nbsp; &nbsp; &nbsp; &nbsp; // Correct&nbsp; &nbsp; &nbsp; &nbsp; this.data = [];&nbsp; &nbsp; &nbsp; &nbsp; this.getEmpData();&nbsp; &nbsp; }&nbsp; &nbsp; // ADD PROPS&nbsp; &nbsp; static get properties() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {type:Array}&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; getEmpData() {&nbsp; &nbsp; &nbsp; &nbsp; fetch('../../../emp-data.json')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(()=>(response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (response.status !== 200) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Looks like there was a problem. Status Code: ' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; response.status);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // SET DATA ON RESOLVE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; response.json().then(data => this.data = data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch(function(err) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Fetch Error :-S', err);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (this.data || []).map(emp => emp.active ? this.dataTemplate(emp) : '')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; }}customElements.define('emp-component', EmpComponent);

Answer 3

您没有返回任何内容getEmpData()so this.datais undefined，因此出现错误。请记住，如果您在调用return之前添加一个语句，那么将包含一个. 在这种情况下，该指令可以提供帮助：fetch()this.dataPromiseuntilimport {until} from 'lit-html/directives/until.js';// ...render() {&nbsp; return html`&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; ${until(&nbsp; &nbsp; &nbsp; &nbsp; this.data.then(data => data.map(emp => emp.active ? this.dataTemplate(emp) : ''),&nbsp; &nbsp; &nbsp; &nbsp; html`<p>Loading...</p>`,&nbsp; &nbsp; &nbsp; )}&nbsp;&nbsp; &nbsp; </div>&nbsp; `;}