渲染函数内的模板无法解析 - 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) {

    if (expression) {

        return truVal();

    }

    if (falseVal) {

        return falseVal();

    }

    return undefined;

}

第 2 步：js在您的文件中导入 util

import {

    LitElement,

    html

} from 'lit-element';

import {

    when

} from 'util.js'

第 3 步：在isLoading. static get properties所以在初始加载时，我们设置onload为 trueconstructor

import {

    LitElement,

    html

} from 'lit-element';

import {

    when

} from 'util.js'

class EmpComponent extends LitElement {

    static get properties() {

        return {

            isLoading: {

                type: Boolean

            },

        }

    }

    constructor() {

        super();

        this.isLoading = true;

    }

第 4 步：一旦获取数据，我们就可以渲染 DOM。然后我们可以设置isLoading为 false 然后使用渲染 DOMwhen

static get properties() {

    return {

        isLoading: {

            type: Boolean

        },

        canRender: {

            type: Boolean

        }

    }

}

constructor() {

    super();

    this.isLoading = true;

    this.canRender = false;

    this.data = this.getEmpData();

    this.isLoading = false;

    this.canRender = true;

}

render() {

    return html `

    ${when(this.isLoading,() => html`<p>Loading...</p>`)}

    ${when(this.canRender,() => html`<your-component></your-component>`)}

  `

}

这是until. 你可以从这个博客sabarinath blog获得更多细节

Answer 2

解决方案

我评论了您应该进行更改的部分。你不需要对其他进口做奇怪的事情

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

    

class EmpComponent extends LitElement

{

    constructor() {

        super();

        // you were returning a promise to an Array type...

        // this.data = this.getEmpData();

        // Correct

        this.data = [];

        this.getEmpData();

    }

    // ADD PROPS

    static get properties() {

        return {

            data: {type:Array}

        };

    }

    getEmpData() {

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

            .then(()=>(response) {

                    if (response.status !== 200) {

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

                            response.status);

                        return;

                    }

                    // SET DATA ON RESOLVE

                    response.json().then(data => this.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 3

您没有返回任何内容getEmpData()so this.datais undefined，因此出现错误。

请记住，如果您在调用return之前添加一个语句，那么将包含一个. 在这种情况下，该指令可以提供帮助：fetch()this.dataPromiseuntil

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

// ...

render() {

  return html`

    <div>

      ${until(

        this.data.then(data => data.map(emp => emp.active ? this.dataTemplate(emp) : ''),

        html`<p>Loading...</p>`,

      )} 

    </div>

  `;

}