Проблема с пользовательским компонентом - PullRequest
Новая
       19

Проблема с пользовательским компонентом

0 голосов
/ 01 мая 2019

Я работаю над изучением 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)

Результат, который я ищу - это выборкомпонент down, заполняемый массивом, который у меня есть как свойство.Прямо сейчас я ничего не получаю за выпадающий список, так как он даже не повторяется через массив, чтобы предоставить возможность выбора.

любая помощь будет отличной.

1 Ответ

0 голосов
/ 02 мая 2019

Это то, что я сделал, чтобы исправить это в 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>

и теперь мой выпадающий списокзаселяется

...