如何用 Lit-element 在文本字段中用空字符串替换 undefined

Question

我在这个项目中使用了 Lit-element 和 mwc-element。我有两个字符串变量和一个对象变量。该对象保存字符串值。我想使用对象值填充文本字段。当我将值包含到 HTML 中时，我已经成功地做到了这一点。如果我不传入任何值，则文本字段将填充“未定义”，如下图所示。我怎样才能避免这种情况并将文本字段设为空？

<person-identifier></person-identifier>

<person-identifier value='[{"use": "official","system": "urn:lumiradx:consult","value": "LDX12345"}]'></person-identifier>

import { LitElement, html } from 'lit-element';
import '@material/mwc-textfield/mwc-textfield.js';

class PersonIdentifier extends LitElement {
    static get properties() {
        return {
            systemIdentifier: { type: String },
            identifierField: { type: String },
            value: { type: Array }
        }
    }


    constructor() {
        super();
        this.systemIdentifier = 'true';
        this.identifierField = 'true';
        this.value = [{}];
    }


    render() {

        if (typeof (this.value) == "string") {
            this.value = JSON.parse(this.value);
        }
        return html` ${this.value.map((i, index) => html`
        ${this.systemIdentifier !== 'false' ? html`<mwc-textfield outlined value="${i.system}" @input="${e => this.value[index].system = e.target._input.value}" class="systemIdentifier" label="System:"></mwc-textfield>` : ''}
        ${this.identifierField !== 'false' ? html`<mwc-textfield outlined value="${i.value}" @input="${e => this.value[index].value = e.target._input.value}" class="identifierField" label="Identifier:"></mwc-textfield>` : ''}
        `)}`;

    }
}

customElements.define('person-identifier', PersonIdentifier);

Answer 1

在 lit-element 中，在合并属性时使用 . 表示法。所以在这里这将通过更新这样的绑定来解决.value="${i.system}"