Получение имени селектора из json в Angular 2

Я хочу динамичную форму. В каком элементе детали будут поступать из json.

У меня есть такой json:

{
"FormElements": [
    {
        "selectorName": "text-input",
        "id": "",
        "class": "location",
        "name": "simpletext",
        "placeholder": "Enter your text here",
        "label": ""
    },
    {
        "selectorName": "radio-button",
        "id": "radio",
        "class": "",
        "name": "radio-name",
        "placeholder": "",
        "label": "Push this"
    }]
}

и шаблон моего компонента выглядит примерно так:

<form>
    <div *ngFor="let fe of data.FormElements">
        <{{fe.selectorName}} idName="{{fe.id}}" className="{{fe.class}}" nameText="{{fe.name}}" placeholderText="{{fe.placeholder}}" labelName="{{fe.labell}}"></{{fe.selectorName}}>
    </div>
</form>

Но это дает ошибку:

Unexpected closing tag "{{fe.elementName}}" ("{{fe.class}}" nameText="{{fe.name}}" placeholderText="{{fe.placeholder}}" labelName="{{fe.labell}}">[ERROR ->]</{{fe.elementName}}>

Пожалуйста помоги. Спасибо!


angular angular2-forms angular2-components
person amansoni211    schedule 26.12.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не можете просто использовать динамические значения для таких имен тегов, я предлагаю вам использовать ngSwitch вот так

<form>
    <div *ngFor="let fe of data.FormElements">
        <div [ngSwitch]="fe.selectorName">
            <div *ngSwitchCase="'text-input'">
                <text-input idName="{{fe.id}}" className="{{fe.class}}" nameText="{{fe.name}}" placeholderText="{{fe.placeholder}}" labelName="{{fe.label}}"></text-input>
            </div>

            <div *ngSwitchCase="'radio-button'">
                <radio-button idName="{{fe.id}}" className="{{fe.class}}" nameText="{{fe.name}}" placeholderText="{{fe.placeholder}}" labelName="{{fe.label}}"></radio-button>  
            </div>
        </div>
    </div>
</form>
person Meme Composer    schedule 26.12.2016
comment
Спасибо @Dummy. Я внес небольшое изменение в ваш ответ. строка № 3: ‹div [ngSwitch]=fe.selectorName› будет работать без {{ }} вокруг fe.selectorName - person amansoni211; 26.12.2016
comment
Да, потому что привязка свойства [ ] ожидает выражение, если я не ошибаюсь, интерполяция {{ }} не является выражением. - person Meme Composer; 26.12.2016