0

我正在学习 lit-element，lit-html。我要创建的组件是自定义选择组件。我在填充下拉值和选项时遇到问题。我正在寻求下一步我应该做什么的指导，看看我是否走在正确的轨道上。

我尝试执行重复函数来遍历选项数组，但它不起作用。

这是我的选择组件的代码。

import {LitElement, html} from 'lit-element';
import {repeat} from 'lit-html/lib/repeat.js';

class HiSelect extends LitElement{
    static get properties(){
        return{
            SelName: String,
            SelplaceHolder: String,
            SellabelName: String,
            SelValue: Array
        }
    }

    constructor(){
        super();
    }

    render(){
        return html`
        <div class="form-field">
            <div class="form-field__control">
                <select id="form-field-select" class="form-field__select" 
                 name="${this.SelName}">
                    ${repeat(this.SelValue, (option) => html`<option>${option.value} 
                </option>`)};
                </select>
                <label for="${this.SelName}" class="form- 
                  field__label">${this.SellabelName}</label>
                <div class="form-field__bar"></div>
            </div>
        </div>
        `
    }
}
customElements.define('hi-select',HiSelect);

这是我的 app.js 的代码

import {LitElement, html} from 'lit-element';
import './Hi-TextBox.js';
import './Hi-TextArea.js';
import './Hi-Select.js';

class Components extends LitElement{
    static get properties(){
        return{

        }
    }

    constructor(){
        super();
        this.labelName="Category";
        this.name="Category";
        this.value="";
        this.placeHolder=" ";
        this.Columns = 30;
        this.Rows = 10;
        this.TaName = "Description";
        this.Taplaceholder=" ";
        this.TalabelName="Description";
        this.SelName = "Select Test";
        this.SellabelName = "--Select one--"
        this.SelValue = ["kitchen,Bedroom,Garage"]

    }

    render(){
        return html`
        <style>
            .form-control{
                width:25%;
            }
        </style>
            <h3>Components</h3>
            <div class="form-control">
                <hi-textbox type="text" .labelName="${this.labelName}" .name="${this.name}" .value="${this.value}" 
                .placeHolder="${this.placeHolder}"></hi-textbox>
            </div>
            <div class="form-control">
                <hi-textarea .TalabelName="${this.TalabelName}" .TaName="${this.TaName}" .Columns="${this.Columns}" .Rows="${this.Rows}"></hi-textarea>
            </div>
            <div class="form-control">
                <hi-select .SelName="${this.SelName}" .SellabelName="${this.SellabelName}">
                    <option .SelValue=${this.SelValue}>${this.SelValue}</option>
                </hi-select>
            </div>
        `;
    }
}

customElements.define('components-app',Components)

我正在寻找的结果是一个由我作为属性的数组填充的选择下拉组件。现在，我对下拉菜单一无所获，就像它甚至没有通过数组重复以提供 select 选项一样。

任何帮助都会很棒。

4

1 回答 1

1

这就是我在 hi-select.js 中修复它所做的

 <select id="form-field-select" class="form-field__select" name="${this.SelName}">
                    ${repeat(this.SelValue, (i) => html`<option>${i}</option>`)}
                </select>

然后在 app.js 中这样称呼它

<div class="form-control">
                <hi-select .SelName="${this.SelName}" .SellabelName="${this.SellabelName}" .SelValue="${this.SelValue}"></hi-select>
            </div>

现在我的下拉列表正在填充

于 2019-05-02T00:43:37.577 回答