在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元素

回答

相关问题