Ich brauche eindeutige Anker Namen/Komponenten in einer ngFor-Schleife, um es mit ComponentResolver.resolveComponent zu verwenden.create dynamic anchorName/Komponenten mit ComponentResolver und ngFor in Angular2
<div>
<table>
<tr *ng-for="#vIndex of vArr">
<td *ng-for="#hIndex of hArr">
<div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
</td>
</tr>
</table>
</div>
sollte die resultierende html so ähnlich aussehen:
<div>
<table>
<tr>
<td>
<div #uniqueanchorname0_0></div>
</td>
<td>
<div #uniqueanchorname0_1></div>
</td>
</tr>
<tr>
<td>
<div #uniqueanchorname1_0></div>
</td>
<td>
<div #uniqueanchorname1_1></div>
</td>
<td>
<div #uniqueanchorname1_2></div>
</td>
</tr>
</table>
</div>
, die mit i die DynamicComponentLoader wie verwenden:
loader.loadIntoLocation(responseDependentComponent, elementRef, 'uniqueAnchorName1_2');
die resultierende HTML ersetzt bekommen nicht und etwas aussehen wird wie:
<div>
<table>
<tr>
<td>
<div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
</td>
<td>
<div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
</td>
</tr>
<tr>
<td>
<div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
</td>
<td>
<div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
</td>
<td>
<div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
</td>
</tr>
</table>
</div>
Wenn die Erstellung von eindeutigen Ankernamen nicht möglich ist. Gibt es eine andere Möglichkeit, Komponenten an einem bestimmten Ort zu laden?
Sie so etwas wie '# versuchen könnte {{‘ uniqueAnchorName '+ vIndex +' _ '+ hIndex}} ' –
Ich habe dein Problem nicht wirklich verstanden. Hat es funktioniert? Es nicht? Ich habe es nicht ausprobiert, aber das einzige, was ich sehen kann, ist die Tatsache, Großbuchstaben in Ihren Variablennamen zu verwenden. Wenn Sie 'uniqueAnchorName' schreiben, wird der Browser sie vor der Kompilierung von ng2 in' uniqueanchorname' unterteilen. –
@PankajParkar-Schnurrbart ({{xxx}}) wird nicht in Attributen ersetzt, das resultierende HTML sieht immer noch wie #uniqueAnchorName {{vIndex}} _ {{hIndex}} –