角度2 - ngfor没有包装在容器中

Question

我希望有一个ul元素然后在我的json中我有html包含来自各种社交媒体网站的列表（li）元素..当我在列表项上添加ngfor时，每个元素创建多个ul输出的json记录..是否可以将每个li输出为普通的html而不是将它们包装在元素中

我的json的小样本

{
    "courses": [{
        "tile_id": 0,
        "tile_content": "<li class=\"grid-item horiz-double blog-tile\" data-item-id=\"0\">yrdy<\/li>"
    }],
}

我的角度服务的小样本 - 这完美地工作并输出json但是我可能缺少某种格式化设置

public getCourses() {

    this._http.get(this.apiUrl).map(response => response.json()).subscribe(data => {
        // console.log( data.courses );
        this._dataStore.courses = data.courses;

        // console.log(this._coursesObserverXX);

        this._coursesObserverXX.next(this._dataStore.courses);

    }, error => console.log('Could not load courses.'));

}

和我的HTML

<ul class="list-group" *ngFor="#course of courses | async">
      {{ course.tile_content }}
</ul>

目标是不让ngfor输出一个包装器，并将输出显示为纯HTML而不是纯文本，因为它似乎出现了

Answer 1

在某些情况下，<ng-container>可能有用。喜欢（不是针对这个具体问题）：

<ng-container *ngFor="let item of items; let i = index">
  ...
</ng-container>

在DOM中，其内容照常渲染，但the tag itself is rendered as an HTML comment。

来自the documentation：

  

使用<ng-container>

的组同级元素      

[...]

     

<ng-container>救援

     

Angular <ng-container>是一个不会干扰样式或布局的分组元素，因为Angular并没有将它放在DOM中。

Answer 2

不确定您想要/尝试做什么，但您可以这样做：

<ul class="list-group">
  <li *ngFor="#course of courses | async">
    {{ course.tile_content }}
  </li>
</ul>

请注意，也可以使用扩展语法：

<template ngFor [ngForOf]="courses | async" #course>
  {{ course.tile_content }}
</template>

（模板标签不会添加到HTML中）

修改

这有效：

<ul *ngFor="#elt of elements | async" [innerHTML]="elt.title">
</ul>

请参阅此plunkr：https://plnkr.co/edit/VJWV9Kfh15O4KO8NLNP3?p=preview

Answer 3

您可以使用outerHTML

<ul class="list-group" >
  <li *ngFor="let course of courses | async" [outerHtml]="course.tile_content"></li>
</ul>

Plunker example