从 json 中获取选择器名称 Angular 2

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>

从 json 中获取选择器名称 Angular 2

Getting selector name from json in Angular 2

angular2-forms

angular2-components

angular