Angular 2-5 - ngfor 没有包装在 div 容器中答案

【问题标题】：Angular 2-5 - ngfor without wrapping in a div containerAngular 2-5 - ngfor 没有包装在 div 容器中
【发布时间】：2018-12-20 07:02:06
【问题描述】：

我已将 ngFor 放入一个 div 中，该 div 显示包含 HTML 的对象，该对象来自我的数组集合。但是我不希望包含 html 节点 (HTMLElement) 的对象应该包装在一个 div 中，但它应该在没有 div 的情况下显示，我在其中放置了我的 ngFor 指令。

这是我的html

<div *ngFor="let mt of mappingTable"  [innerHTML]="mt?.htmlElement.outerHTML  | escapeHtml: 'html'  ">
 </div>

使用内部[innerHTML]，没关系，但在输出中我看到 htmlElement.outerHTML 被包裹在一个 div 中。

我尝试过<ng-container>，但在网页上显示原始 html

【问题讨论】：

【解决方案1】：

我认为您正在寻找的是Structural Directives。 ng-container 完全符合您的要求，您可以将它用于您的 ngFor 但它不会被 Angular 放入 DOM 中。

【讨论】：

【解决方案2】：

如果您不想将 html 包装在任何父 html 元素中，您可以使用 [outerHTML] 而不是 [innerHTML]：

<div *ngFor="let mt of mappingTable" [outerHTML]="mt?.htmlElement.outerHTML |escapeHtml: 'html' "> </div>

【讨论】：