使用Angular2命名動態創建的單選按鈕組

我想通過指出我對Web開發和Angular2相對陌生，來說明這個問題。使用Angular2命名動態創建的單選按鈕組

我有一個Angular2組件，其功能是使用角樹分量庫（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'），它們對每個節點都是唯一的，可以用來命名單選按鈕。但是，我似乎無法獲得按鈕的名稱字段來解析任何表達式並獲取樹節點提供的數據字段的值。

如何獲得動態命名的單選按鈕組，以便它們彼此分開？

來源

2017-04-26 Radix

原來我已經包括（ ngModel）和單選按鈕定義中的id字段。刪除這些字段允許單選按鈕按預期工作，儘管動態創建的組共享相同的名稱。

來源

2017-05-04 18:01:09 Radix

試試這個辦法

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

注意這僅僅是展示它是如何工作的，你必須根據您的要求調整自己的代碼示例

來源

2017-04-27 17:16:26

使用Angular2命名動態創建的單選按鈕組

回答

相關問題