使用 Angular2 命名动态创建的单选按钮组答案

【问题标题】：Naming dynamically created radio button groups with Angular2使用 Angular2 命名动态创建的单选按钮组
【发布时间】：2017-09-24 12:53:56
【问题描述】：

我想先说明我对 Web 开发和 Angular2 比较陌生。

我有一个 Angular2 组件，其功能是使用 angular-tree-component 库 (https://angular2-tree.readme.io) 在网页上创建树视图。对于树中的每个节点，我定义了一个带有单选按钮的弹出 HTML 模板（来自 ng2-bootstrap）。

由于树可以是任意大小，因此单选按钮是使用在树组件 HTML 中声明的模板在弹出框中动态创建的。

我的问题是单选按钮组链接在一起，就好像它们都是一个组一样。我尝试了几种动态命名按钮组的不同方法（理想情况下它们都是单独的组），但似乎没有任何效果。

示例代码：

<div class="testTree">
<Tree #tree id="tree1" [nodes]="nodes">
    <template #treeNodeTemplate let-node="node" let-index="index">
        <span>{{ node.data.name }}</span>

        <template #popTemplate>
            <div class="popDiv">
                Name: {{node.data.name}}<br>
                id: {{node.data.id}}<br>
            </div>          
        <div [innerHtml]="html"></div></template>

        <template #incTemplate>
            <div class="popDiv">

                <input type="radio" attr.name="node.data.id"
                value="ab" (change)="foo(node, $event.target.value)"> Button1<br>

                <input type="radio" attr.name="node.data.id" 
                value="bc" (change)="foo(node, $event.target.value)"> Button2<br>

                <input type="radio" attr.name="node.data.id"
                value="cd" (change)="foo(node, $event.target.value)"> Button3<br>

                <input type="radio" attr.name="node.data.id"
                value="de" (change)="foo(node, $event.target.value)"> Button4<br><br>
                <button (click)="bar(node)">ok</button>

            </div>          
        <div [innerHtml]="html"></div></template>

        <button class="nodeButton" *ngIf="node.isActive || node.isFocused"
        [popover]="popTemplate" placement="right" triggers="" popoverTitle="title1" #pop="bs-popover" (click)="pop.toggle()">Details</button>

        <button class="nodeButton" *ngIf="node.isActive || node.isFocused" 
        [popover]="incTemplate" placement="right" triggers="" popoverTitle="title2" #pop2="bs-popover" (click)="pop2.toggle()">Options</button>


    </template>
</Tree>
</div>

我尝试通过以下方式命名#incTemplate 中的按钮组：

name = "node.data.id"
name = "{{node.data.id}}"
[attr.name] = "node.data.id"
attr.name = "{{node.data.id}}"
attr.name = "node.data.id"

为了查看发生了什么，我给单选按钮一个 id 并在 angular2 类中选择它来记录名称值。名称为空白或文字字符串“node.data.id”。

我会使用 ngModel，但由于可能有大量单选按钮组，我不能让它们使用相同的变量。

每个树节点都有两个变量（“id”和“name”），它们对每个节点都是唯一的，可用于命名单选按钮。但是，我似乎无法获取按钮的名称字段来解析任何表达式并获取树节点提供的数据字段的值。

如何获得动态命名的单选按钮组，使它们彼此分开？

【问题讨论】：

标签： html angular radio-button radio-group

【解决方案1】：

事实证明，我在单选按钮的定义中包含了 (ngModel) 和 id 字段。尽管动态创建的组共享相同的名称，删除这些字段仍允许单选按钮按预期工作。

【讨论】：

【解决方案2】：

试试这个方法

<div *ngFor="let location of locations">
   <input 
   [attr.id]="location"
   type="radio"
   name="location"
   ngModel
   [value]="location">
   <label [attr.for]="location">{{location}}</label>
</div>

请注意，这只是一个演示它如何工作的示例，您必须根据您的要求调整您的代码

【讨论】：