自定义组件的问题

Question

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

我曾尝试使用repeat函数来迭代选项数组，但它不起作用。

这是我的select组件的代码。

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下拉组件，该组件由我作为属性的数组填充。现在，我在下拉列表中什么也得不到，就像它甚至没有在数组中重复以提供选择选项一样。

任何帮助都是最好的。

Answer 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>

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