Html 使用Angular2命名动态创建的单选按钮组
在回答这个问题之前,我想指出,我对web开发和Angular2还比较陌生 我有一个Angular2组件,其功能是使用AngularTree组件库()在网页上创建树视图。对于树中的每个节点,我定义了一个带有单选按钮的popover HTML模板(来自ng2引导) 因为树可以是任意大小,所以单选按钮是使用树组件HTML中声明的模板在popover中动态创建的 我的问题是,单选按钮组链接在一起,就好像它们都是单个组一样。我尝试了几种动态命名按钮组的不同方法(理想情况下,它们都是单独的组),但似乎没有任何效果 示例代码:Html 使用Angular2命名动态创建的单选按钮组,html,angular,radio-button,radio-group,Html,Angular,Radio Button,Radio Group,在回答这个问题之前,我想指出,我对web开发和Angular2还比较陌生 我有一个Angular2组件,其功能是使用AngularTree组件库()在网页上创建树视图。对于树中的每个节点,我定义了一个带有单选按钮的popover HTML模板(来自ng2引导) 因为树可以是任意大小,所以单选按钮是使用树组件HTML中声明的模板在popover中动态创建的 我的问题是,单选按钮组链接在一起,就好像它们都是单个组一样。我尝试了几种动态命名按钮组的不同方法(理想情况下,它们都是单独的组),但似乎没有任
<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>
为了查看发生了什么,我给了单选按钮一个id,并在angular2类中选择它来记录名称值。名称为空或文本字符串“node.data.id”
我会使用ngModel,但由于可能有大量单选按钮组,我不能让它们使用相同的变量
每个树节点都有两个变量(“id”和“name”),它们对每个节点都是唯一的,可以用来命名单选按钮。但是,我似乎无法获取按钮的name字段来解析任何表达式,也无法获取树节点提供的数据字段的值
如何动态命名单选按钮组,使它们彼此独立?试试这种方法
<div *ngFor="let location of locations">
<input
[attr.id]="location"
type="radio"
name="location"
ngModel
[value]="location">
<label [attr.for]="location">{{location}}</label>
</div>
{{location}}
请注意,这只是一个示例,演示了它是如何工作的
根据需要调整代码
原来我在单选按钮的定义中包含了(ngModel)和id字段。删除这些字段允许单选按钮按预期运行,尽管动态创建的组共享相同的名称
<div *ngFor="let location of locations">
<input
[attr.id]="location"
type="radio"
name="location"
ngModel
[value]="location">
<label [attr.for]="location">{{location}}</label>
</div>