从Angular 2中的JSON获取选择器名称

Question

我想要动态形式。其中元素细节将来自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}}>

请帮忙。谢谢！

Answer 1

您不能仅对这样的标签名称使用动态值，我建议您要做的就是使用 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>