在Angular 2中創建dom元素

在組件中動態創建DOM元素的最簡單方法是什麼？我有一個從API加載的樹（與parentId的PARAM項）的模型，我需要打印出來到嵌套表像在Angular 2中創建dom元素

<ul> 
    <li>List item one</li> 
    <li>List item two with subitems: 
     <ul> 
      <li>Subitem 1</li> 
      <li>Subitem 2</li> 
     </ul> 
    </li> 
    <li>Final list item</li> 
</ul>

來源

2017-06-30 Gatekeeper

您需要使用* ngFor創建DOM元素動態的angular2

<ul> 
<ng-template #recursiveList let-list> 
<li *ngFor="let item of list"> 
    {{item.title}} // just assuming 
    <ul *ngIf="item.children.length > 0"> 
    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container> 
    </ul> 
</li> 
</ng-template> 
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"> </ng-container> 
</ul>

你需要根據自己的模型來更改代碼

請檢查gist

來源

2017-06-30 08:36:16

謝謝，我知道怎麼使用ngFor，但考慮我的例子 - 具有parentId參數的項目。如果你不知道它會有多少個子列表，你將如何創建多級列表？ – Gatekeeper

@Gatekeeper使用遞歸：創建一個顯示節點名稱的TreeNode組件，然後使用ngFor來使用TreeNode組件顯示其所有子節點。 –

@ Gatekeeper，請檢查更新後的答案 –

Structural directives是給你的。

本指南介紹Angular如何用結構指令操縱DOM，以及如何編寫自己的結構指令來完成相同的操作。

來源

2017-06-30 08:35:19 Max

在Angular 2中創建dom元素

回答

相關問題