Benennung dynamisch erstellter Optionsfeldgruppen mit Angular2

Question

Ich möchte diese Frage mit der Bemerkung vorwegnehmen, dass ich relativ neu in der Webentwicklung und Angular2 bin.

Ich habe eine Angular2-Komponente, deren Funktion es ist, eine Baumansicht auf einer Webseite unter Verwendung der Angular-Tree-Komponenten-Bibliothek (https://angular2-tree.readme.io) zu erstellen. Für jeden Knoten in der Baumstruktur habe ich eine Popover-HTML-Vorlage (von ng2-bootstrap) mit Optionsfeldern darin definiert.

Da der Baum eine beliebige Größe haben kann, werden die Optionsschaltflächen im Popover dynamisch mithilfe einer Vorlage erstellt, die in der Baumkomponente HTML deklariert ist.

Mein Problem ist, dass die Radio Button Gruppen miteinander verknüpft sind, als ob sie alle eine einzige Gruppe waren. Ich habe verschiedene Möglichkeiten ausprobiert, die Schaltflächengruppen dynamisch zu benennen (im Idealfall würden sie alle separate Gruppen sein), aber nichts scheint zu funktionieren.

Beispielcode:

<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> 

Ich habe versucht, die Tastengruppen in der #incTemplate auf folgende Arten zu nennen:

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

Um zu sehen, was los war, gab ich Das Optionsfeld hat eine ID und wählte es in der angular2-Klasse aus, um den Namen zu protokollieren. Der Name war entweder leer oder die literale Zeichenfolge "node.data.id".

Ich würde ngModel verwenden, aber da es eine große Anzahl von Optionsfeldgruppen geben kann, kann ich sie nicht mit denselben Variablen verwenden.

Jeder Baumknoten hat zwei Variablen ('id' und 'name'), die für jeden Knoten eindeutig sind und zum Benennen der Optionsfelder verwendet werden können. Ich kann jedoch anscheinend nicht das Namensfeld der Schaltfläche abrufen, um einen der Ausdrücke aufzulösen, und den Wert des vom Baumknoten bereitgestellten Datenfelds übernehmen.

Wie bekomme ich die Radio Button-Gruppen dynamisch benannt, so dass sie voneinander getrennt sind?

Answer 1

Es stellt sich heraus, dass ich aufgenommen hatte (ngModel) und ID-Felder in den Definitionen der Optionsfelder. Durch das Entfernen dieser Felder konnten die Optionsschaltflächen trotz der dynamisch erstellten Gruppen mit demselben Namen wie beabsichtigt ausgeführt werden.

Answer 2

diesen Ansatz versuchen

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

Hinweis dies zeigt nur ein Beispiel dafür ist, wie es funktioniert Sie Code neu einstellen müssen, entsprechend Ihren Anforderungen