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

【问题标题】：Getting selector name from json in Angular 2从Angular 2中的json获取选择器名称
【发布时间】：2017-05-10 17:04:37
【问题描述】：

我想要一个动态表单。其中元素细节将来自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

【解决方案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>

【讨论】：

谢谢@Dummy。我对你的回答做了一点改动。第 3 行：
将在 fe.selectorName 周围没有 {{ }} 的情况下工作
是的，因为[ ]的属性绑定需要一个表达式，如果我没记错的话，插值{{ }}不是一个表达式。